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

How to make component stick to bottom in ScrollView but still alow other content to push it down
Enzyme: simple .to.have not working
ReactJS: Best way to check state values and update render based on state?
Does treetabular support remote child nodes?
Setting distance between X values
Add a prefix into routes on ReactJS
How to pass a value to my parent React component from input type?
why my setTimeout function is not work while I use react-native and react-router-native
React Native - pass class to component as props
mapDispatchToProps with typescript is being difficult
react-form: How to use multiple forms in combineReducers?
React router 4 server-side rendering using IIS, not express
react-bootstrap Cannot read property 'Component' of undefined
Optional Path React Router 4
Synchronize redux from server side with redux from client
React router - Need to click LINK twice to pass props to Component

Categories

HOME
algolia
compression
apache-storm
blob
liquibase
nagios
ebay-api
conceptual
jquery-plugins
stdout
datetimepicker
browser-cache
powerquery
collision-detection
schema
osx-yosemite
mongoimport
fetch
mamp
ldap-query
email-attachments
captcha
camunda
eclipse-orion
swift3.1
sha1
game-engine
samba
views
autologin
glibc
datasource
angular2-pipe
gnu-screen
google-drive-android-api
concatenation
aspxgridview
grunt-contrib-uglify
windows-10-mobile
emr
federated
paper-trail-gem
deferred
edsdk
andengine
ibm-bpm
choco
apache-falcon
kepserverex
redhat-brms
origami
mockserver
observer-pattern
redbean
test-kitchen
grails-2.0
cakephp-3.2
html-entities
encoder
emacs24
extjs3
bioperl
activesupport
petapoco
nsalert
zedgraph
spring-cloud-aws
portaudio
easy68k
git-push
change-password
qtruby
supervised-learning
window.location
nd4j
music-player
bluetooth-lowenergy-4.2
dnvm
jeet-grid
valdr-bean-validation
genero
bungeecord
chrome-mobile
mri
dockerpy
sony-xperia
system.io.packaging
os.walk
worklight-appcenter
nsmutableurlrequest
ccmenuitem
rpt
banana-pi
windows-phone-store
nvcc
code-complete
ntdll
database-restore
gpl
metapost
ncml
jquery-1.8
shapado
certificate-revocation
event-propagation
nude.js
jmesa
advanceddatagrid
jexcelapi
method-call
netbeans7.0
simultaneous
mysql-logic
carbon-emacs
morfik
moores-law
weak-typing

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile