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][Router] onSubmit Form doesn't go to the page
Persisting events for a period of time with React / Redux
Add a success message after redirect in reactjs
react-router-dom usage in index.js
How do I change webpack dev server's default port from 8080 to a different port?
how can I cohabitate D3 and React.js or Vue.js?
Set default activeClassName for NavLink in React Router v4
Reactjs combine all the states to parent component
How to pass a function down the component's hierarchy without using props in React?
Meteor React createContainer rerender
Idiomatic way to chain redux state changes?
How to select unknown element in react native webview?
How to split props string in React?
TypeScript: Export React components as part of a namespace
How to find out what is initiating an (re)render in React
Get API response to a function and populate controls

Categories

HOME
c#
azure-documentdb
teradata
formatting
watson-iot
squeak
grid
angularjs-directive
yuv
vsixmanifest
software-collections
angular-universal
http-status-codes
lambda-calculus
web-worker
dompdf
k-means
openscad
web-parts
jquery-easyui
custom-component
git-branch
email-client
ecmascript-2017
ps
rollupjs
large-files
r-factor
schedule
jmsserializerbundle
jql
wercker
imdb
oracle-nosql
webmock
cache-control
icu
directadmin
npoco
nao-robot
denodo
monaca
runtime-permissions
vertex
jenkins-docker
business-catalyst
chain
msiexec
blackberry-webworks
zsh-completion
dbi
foreground
disconnect
netlink
key-value-store
qtruby
avi
wizard
alchemy
methodology
web-performance
matlab-engine
gitk
serial-communication
mergecursor
valdr-bean-validation
sicstus-prolog
maven-archetype
perfect-scrollbar
cordova-3
iphone-6
uiblureffect
fedena
novell
nsnotificationcenter
azure-worker-roles
atg-dynamo
reactjs-native
class-library
autofilter
xcode5.1
myrrix
ie-developer-tools
kademlia
bho
gwt2
ftpwebrequest
mail-gem
aspmenu-control
socketasynceventargs
advanceddatagrid
maven-eclipse-plugin
utm
soapexception
peoplepicker
youtube.net-api
jexcelapi
jqtransform
chromebug
jquery-attributes
miniport
silverlight-2.0
focus-stealing
disk-based
scalable

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile