reactjs


autocomplete is undefined with material-ui


I have the following code in a jsx file and I get error:
Uncaught ReferenceError: AutoComplete is not defined
From what I see it should be working ok, Code:
import React, {Component} from 'react';
import { Autocomplete } from 'material-ui';
class MaterialUIAutocomplete extends Component {
constructor(props) {
super(props);
this.onUpdateInput = this.onUpdateInput.bind(this);
this.state = {
dataSource : [],
inputValue : ''
}
}
onUpdateInput(inputValue) {
}
render() {
return <AutoComplete
dataSource = {this.state.dataSource}
onUpdateInput = {this.onUpdateInput} />
}
}
export default MaterialUIAutocomplete;

It's a typo, you are importing Autocomplete and using AutoComplete.
Use these ways to import AutoComplete:
import { AutoComplete } from 'material-ui';
Or
import AutoComplete from 'material-ui/AutoComplete';
Update:
To render material-ui component we need to add the default theme and styling, include these lines in your component, like this:
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const muiTheme = getMuiTheme({});
Then render the AutoComplete inside MuiThemeProvider:
render() {
return <MuiThemeProvider muiTheme={muiTheme}>
<AutoComplete
dataSource = {this.state.dataSource}
onUpdateInput = {this.onUpdateInput} />
</MuiThemeProvider>
}
Use this:
import React, {Component} from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const muiTheme = getMuiTheme({});
class MaterialUIAutocomplete extends Component {
constructor(props) {
super(props);
this.state = {
dataSource : [],
inputValue : ''
}
this.onUpdateInput = this.onUpdateInput.bind(this);
}
onUpdateInput(inputValue) {
}
render() {
return <MuiThemeProvider muiTheme={muiTheme}>
<AutoComplete
dataSource = {this.state.dataSource}
onUpdateInput = {this.onUpdateInput} />
</MuiThemeProvider>
}
}
export default MaterialUIAutocomplete;
Note: MuiThemeProvider is not required to include inside each component, you can use this in main page and then you can use any material-ui component inside any component.


Related Links

Is there a way to use radium styles for semantic-ui components in reactjs?
Convert between ES6 Classes React
Webpack dev server + React + Typescript wont inject assets after sources change
React-bootstrap : popup modal open when we click on login menu
Remove html attribute in production build
Why am I getting Failed prop type using react router and nested components
State bug - row component getting bad values from props if wait
Multi-line select component for react?
Use child components as real components, not stateless child objects
React alternative coding style with a 'constructor'
Hot Module Reload and React Dom issue
Webpack error: “You may need an appropriate loader to handle this file type”
Menus not opening in TinyMCE in React
react routing not working as expected
How to know when children finished parent function call?
mobx computed property observing computed property does not recalcuoate

Categories

HOME
netty
display
webvr
apache-storm
conceptual
arcgis
redhawksdr
procmon
meson-build
osx-yosemite
activejdbc
aws-sdk-cpp
urllib2
osclass
yui
pylint
ringcentral
cucumberjs
orange
aws-devicefarm
glibc
bootstrap-datetimepicker
lotusscript
klipfolio
hololens
inline-assembly
poisson
sasl
rollupjs
windows-mobile
utc
multiple-inheritance
ios9
undo
directions
epub
openvms
leaderboard
sdl-2
maven-2
console.readline
matrix-multiplication
motion
ng-lightning
aura-framework
test-kitchen
pyopenssl
selection-sort
nsalert
ios-keyboard-extension
stripes
android-music-player
gevent
boost-range
scriptengine
cherry-pick
angularfire
pyshark
paypal-subscriptions
custom-build-step
calc
musicbrainz
textblob
polarion
p4python
playn
system.diagnostics
nfa
wingdb
cl.exe
shunting-yard
crtdbg.h
cordova-3
jsonmodel
qf-test
nsurlrequest
worklight-appcenter
time-frequency
hotlinking
jsmpp
nodeunit
slimscroll
kernel-density
starling-framework
data-layers
thucydides
dylan
grape-api
objectdatasource
typography
uikit-dynamics
windows-scheduler
ntdll
configurationsection
correctness
inflate
filedialog
project-files
nsundomanager
scsf
isgl3d
designated-initializer
n2
large-data-volumes
vista64
cross-cutting-concerns





Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm