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

Render react component multiple times
Is there a way to hook ReactJS onto dynamic elements from backbone?
React-Style not working with webpack-dev-server. Style not extracted. Getting 'Invariant Violation: _registerComponent(…): Target
Can you force a React component to rerender without calling setState?
update brothers objects from react
How to test actions in Flux/React?
document is not defined when attempting to setState from the return of an async call in componentWillMount
How to best clone a class in ReactJS
API requests as a result of changes to domain objects
How to redirect using if else in ReactJS
Prism.js html examples in React
Why is materialize not working with reactjs
React.js How to Pass Event Up Through Multiple Child Components?
Accessing react-router from flummox action/store
Flux - How does store should notify error?
is “shouldComponentUpdate” run on the server?

Categories

HOME
qlikview
logging
kendo-ui-angular2
android-ndk
pandoc
bitbucket
sms
uml-designer
multipartform-data
google-api-oauth
segmentation-fault
cracking
kairosdb
velocity
web-testing
multibinding
k-means
internet-explorer-7
spring-webflow
polybase
hololens
handle
poisson
datastax-enterprise
android-6.0-marshmallow
semantic-ui-react
foxpro
jql
oracle-nosql
angularjs-resource
mapquest
blueimp
ssdp
icu
flume-ng
text-extraction
nshttpurlresponse
spring-ide
line-endings
runner
geminabox
django-tables2
ear
beanshell
intermediate-language
sp
richtext
nservicebus6
typewriter
multi-targeting
multi-select
spring-social-twitter
papyrus
nimbus
audiorecord
user-profile
methodology
opendolphin
transbase
dpkt
nmock
playn
opennebula
firebase-tools
fiware-health
caption
xcode5
lwuit
powerpoint-2010
powershell-v1.0
pnunit
dotcmis
mvcgrid
codio
pechkin
extensibility
asp.net-4.0
google-checkout
pymel
ncml
feincms
mail-gem
report-viewer2010
xcode4.6.3
diazo
animationdrawable
datasheet
advanceddatagrid
fileoutputstream
scsf
copyfile
virtual-printer
httppostedfilebase
parallel-python
gmagick
symfony-1.2
jexcelapi
nbehave
hs-err
xcdatamodel
numerical-computing
managed-code
ironpython-studio

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