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

Unknown props on React Datepicker
How to parse query string in react-router v4
react-intl: Missing locale data for locale: “undefined”. Using default locale: “en” as fallback
Reference a React Element before its declared in JSX
How to create custom key bindings in draft.js?
Url to right route description
react store.subscribe setState warning
copy node_module/#type/koa to my custom typeRoots,why not work?
react-router not returning content for nested routes on page load
testing if component text is copy-able or not
using react-router with express at server-side router
Make a calendar in Reactjs, display days
How to do better routing and app structure in React Native?
react-virtualized - How to make sortable MultiGrid
Trouble with binding event handlers in react
react-native: uploaded video it saves like image

Categories

HOME
c#
ssms
botframework
ftp
ldap
opencv4android
conceptual
mifare
livecharts
x509certificate
where
assign
xss
css-selectors
meson-build
sitemap
android-webview
restheart
resharper
tmux
yui
console-application
google-closure-compiler
google-street-view
aws-devicefarm
passbook
react-jsx
gomobile
git-branch
handle
policy
scrapy-spider
jira-zephyr
deployment-descriptor
akavache
stack-trace
multiple-inheritance
dynamics-ax-2012-r3
kundera
delphi-2010
edirectory
arp
andengine
language-detection
android-scrollview
jsonapi-resources
fastadapter
apache-falcon
javax
odp.net
ponylang
console.readline
jquery-inputmask
vpython
reqif
qtwebkit
activeandroid
opos
confluent
emacs24
e4
activesupport
business-catalyst
rmq
easy-thumbnails
optional-parameters
joystick
netlink
normalisation
queuing
php-java-bridge
avi
boost-bind
database-administration
containstable
ruby-1.8.7
gitk
syncano
euro
grails-3.0.9
jeet-grid
system.net
sat4j
data-layers
nomachine
xtify
ekevent
xcode5.1
fade
pechkin
zend-db-table
maven-webstart-plugin
windows-scheduler
junction-table
microsoft-speech-platform
database-restore
correctness
netbiscuits
custom-cursor
winrt-async
motorola-droid
clgeocoder
peoplepicker
file-processing
service-layer
cryptolicensing
cpack
fxcopcmd
s60
versions
helios
dynamic-scope
rpxnow
datadude
file-icons
onresize
jgrowl
stackless

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App