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

React-Router only one child
Working around the <td> limitation in React.js
How to use the flag emitFile in webpack file-loader
reactjs issue show loading while dom render with more logic
How to use React$Element in FlowType?
react-TS how to hide login component if you already logged in
ReactJS - How to use method from other component of other file? [duplicate]
How to render a React component from a list of React components
How to create a site map for a website in react?
RunKit samples for react native not working
Multiple React/React-native modules / packager issue
creating elements through loop inside render function in react
Cannot find module '../request' error using mock in Jest
add tooltip for material-ui slider
React rails component render error
Reagent :component-did-mount hook not called with meta-annotated component function

Categories

HOME
spring-boot
internet-explorer
gcc
stanford-nlp
gsm
jenkins-pipeline
spotfire
sugarcrm
foreach
richtextbox
aggregate-functions
country-codes
pdf-generation
samsung-gear-s2
software-collections
normals
spring-data-solr
openbsd
minimum
luis
ibatis
openam
project-structure
url-parameters
onclicklistener
ps
resx
javapns
selenium3
webmock
mootools
intersection
kdevelop
dotnetnuke-module
observer-pattern
keychain
google-chrome-console
susy
file-descriptor
irr
codepen
inner-join
yank
androiddesignsupport
apache-commons-cli
therubyracer
scikit-image
virtualenvwrapper
db2-zos
hana-sql-script
bluetooth-lowenergy-4.2
nslocalizedstring
angular-promise
webservices-client
transport
autoscaling
avrcp
eaaccessory
vensim
cakephp-2.6
radgrid
gmaps4jsf
esri-arc-engine
nsq
crtdbg.h
drools-guvnor
kss
windows-search
ios-enterprise
xps
xcode6.1-gm-seed
jfilechooser
ie-developer-tools
static-class
codeigniter-form-helper
msbuild-task
brew
boost.build
urlfetch
yii-components
cryptarithmetic-puzzle
netzke
waveout
flatten
systrace
reflexil
jqueryi-ui-buttonset
scsf
apache-commons-email
wdm
cpack
quazip
p4.net
system-analysis
qprocess
user-preferences
high-load
moores-law
memory-consumption

Resources

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
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App