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

using css-module with react?
Setting state when react router renders a new component
Import npm modules in client side React components
Argument of type 'typeof -' is not assignable to parameter of type ComponentClass error
React components make inheritance through Compositon
Render React Component from Backbone
add comment jsx logic
React function passed to child through props is undefined
render multiple components with enzyme shallow
React app doesn't serve image assets on production
Who is supposed to pass 'handleSubmit'
React - Display loading screen while DOM is rendering?
React Synthetic Events Bubble Capture with Components
rollup js configuration - globals?
How do I achieve the component scoped styling of Angular 2 in React?
redux form with multiselect from react-widgets

Categories

HOME
classification
oop
formatting
app-store
hiveql
ebay
glympse
uml-designer
angularjs-ng-repeat
oms
aws-sdk-cpp
jetbrains
greensock
pylint
windows-phone
xforms
android-wifi
hololens
handle
ps
priority-queue
rancher
osgi-bundle
paper-trail-gem
concrete5
boost-log
jmsserializerbundle
wordpress-rest-api
blockly
jcr
ports
aweber
maven-2
mapquest
aspose.pdf
lfe
glide-image-library
paperclip
django-cors-headers
stream-socket-client
visualizer
sp
cc
try-catch-finally
printer-control-language
wicketstuff
blackberry-webworks
hdr
mate-desktop
tinybox2
jigsaw
cherry-pick
db2-zos
nsoperationqueue
firefox-os
skbio
fadein
google-app-engine-php
dynamics-nav-2013
javapackager
gulp-cdnizer
play-json
jts
transbase
notice
updating
jsoncpp
cyberduck
avrcp
pagecontrol
vspackage
ultraedit
genero
esri-arc-engine
xcode5
dojox.grid
os.walk
react-os
behance-api
ant-contrib
yandex-api
power-management
flask-mongoengine
carrier
.net-reflector
misfire-instruction
8-puzzle
aspnet-compiler
listpicker
pyxplot
exi
codeigniter-form-helper
junction-table
mysql2
pageload
string-length
motordriver
netbiscuits
big-endian
aspmenu-control
github-archive
reflexil
unordered-set
idtabs
virtual-printer
soapexception
auto-compile
viewdata
numerical-computing
authkit
expander
stackless

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