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

Warning: Failed prop type: Game: prop type `game` is invalid; it must be a function, usually from React.PropTypes
issue hosting on firebase with React-Redux app?
How to convey error information through Relay render when the response includes errors and data?
Unable to trigger Redux action after ajax
React native iOS open message app with default text
How to make synchronous API call request in react js
ReactJS: Turn object into array and render
redux-form - Register all fields from state
how to map values in material ui auto-complete
handle change event not working for input types?
Redux passing down actions
Pass data to child React component?
Dynamically change input's name in .map inside React JSX
When initialize action trigger?
How to render nested array elements in React?
creating a bar chart using Highcharts with React - getting an error that rendering div isn't found

Categories

HOME
msbuild
system-calls
service
c++builder
azure-resource-manager
query-string
ms-application-insights
overrides
sugarcrm
kendo-asp.net-mvc
rethinkdb
ejb-3.0
coding-style
google-app-maker
angular-universal
distinct
tracking
mbed
popup
android-actionbar
draw2d
hl7-fhir
vala
tcpdf
rollupjs
pydub
jbossfuse
jboss-arquillian
ios-autolayout
spring-oauth2
choco
flickr
openvms
zimbra
stdin
instances
electron-packager
jquery-ui-slider
head
bootstrap-carousel
google-chrome-storage
text-formatting
import.io
stanford-nlp-server
e4
audio-fingerprinting
visualizer
px4
boost-regex
androiddesignsupport
spring-cloud-aws
was
therubyracer
huawei
cedar-bdd
firebase-job-dispatcher
zsh-completion
require-handlebars
airwatch
python-rq
firefox-os
sqldataadapter
nonblocking
sdkman
redquerybuilder
page-refresh
screen-lock
beagleboard
asp.net-2.0
drools-guvnor
novell
breeze-sharp
redmine-plugins
mvcgrid
telerik-appbuilder
email-headers
mysql-error-1146
friendly-url
select2-rails
microsoft-speech-platform
junit-rule
waveout
aspmenu-control
pdf-reader
nserror
optimistic-concurrency
stl-algorithm
execjs
windows-xp-embedded
service-layer
netduino
viewdata
table-valued-parameters
atmega16

Resources

Encrypt Message