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 Child Component Not Rendering
Serving a static html page from a single page react app with react router
Convert const to react class
react material ui not responsive when opened in mobile browser
How do “componentWillUnmount” work with clearinterval?
Can't get Webpack 2 HMR React to work
Wait for render to complete before changing DOM
react-redux not dispatching thunk api call
Why is concat on array inside this.state not working?
React + Redux Server initialize with store and history
How to add sass-loader with Webpack 1?
Geo complete for ReactJS
How to create Typescript Definition for React Native Nested Components
React.js Flux add, make Client's Browser automatic update to latest code
How to call an event on tabs changed in react-bootstrap
React Native this2.state error

Categories

HOME
ssms
domain-driven-design
sip
dronekit
ibm
liquibase
boxplot
django-middleware
stdout
assign
atlassian-fisheye
liquidsoap
open-search-server
virtualhost
gcloud
openbsd
wowza
fetch
ng2-charts
cakephp-2.0
box2d
luis
dompdf
web-parts
accordion
ampscript
openoffice-basic
jq
formulas
uipath
ecmascript-2017
priority-queue
arp
andengine
opencsv
wercker
availability
microstrategy
tunnel
mkdir
aweber
lighting
realloc
libconfig
instances
rbac
smooth-streaming
grails-2.0
amazon-fire-tv
jsfl
confluent
flask-socketio
multivalue
openpgp.js
htop
sharpssh
androiddesignsupport
dmalloc
grib
disassembly
suitesparse
lattice
turbolinks
scikit-image
indoor-positioning-system
scriptengine
vga
syslog4j
mrunit
mod
nd4j
sqlxml
android-progressbar
custom-build-step
jquery-draggable
ewam
opendolphin
android-contentresolver
play-json
polarion
vectordrawable
jeet-grid
mri
touch-typing
illegalargumentexception
powershell-v1.0
indic
ccmenuitem
banana-pi
winrun4j
fastcgi-mono-server
acrofields
mixradio
mahara
complete
maven-javadoc-plugin
randomaccessfile
dynamic-expresso
kademlia
google-checkout
latex-suite
windows-scheduler
msbuild-task
generator-expression
screensharing
netbiscuits
jquery-1.8
ios6-maps
erlide
visual-leak-detector
automapper-2
mcpd
noise-reduction
onunload
nstoolbar
silverlight-2.0
qlibrary
bootstrap-protocol
urlscan

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