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

Components and events after an external library has changed dom structure
How can we use react jsx templates in node-webkit
ReactJs + React Router: re-rouse using keyboard events
React native: callback error in native module
how change state of several elements after click on button with React.js
React 0.13 this.getDOMNode() equivalent to React.findDOMNode()
Using Masonry with ReactJS in browser
Getting DOM node from React child element
Babelify omit file extension on import
ReactJS: Control a child state from the child and the parent
What are these grey lines in the Chrome sources panel?
How to position and resize React Bootstrap Tooltip before displaying it on the DOM?
ES6 features in React Native
Error: Invariant Violation: dangerouslyRenderMarkup(…): Cannot render markup in a worker thread
Component not being unmounted
ReactJS: “this.props” is not a function when child component calls parent

Categories

HOME
teradata
stanford-nlp
ssh
pelican
xamarin.forms
opencv4android
highmaps
browser-cache
psexec
pip
google-app-maker
drush
repeater
samba
android-actionbar
virtuemart
passbook
xna
ejb-3.1
dev-c++
gnu-screen
mattermost
javaagents
wai-aria
aws-iot
waterfall
ballerinalang
workflow-foundation
ios9
repeat
linkurious
fisheye
peerjs
qtwebkit
activeandroid
serverless-architecture
google-chrome-storage
ear
dna-sequence
grib
chain
wicketstuff
suitesparse
therubyracer
hdr
class-design
xcode7.1
cosign-api
boost-bind
3d-rendering
jcalendar
bbedit
abstract
alchemy
jquery-draggable
controlpanel
windows-kernel
libgcrypt
biginsights
windows-phone-8-emulator
vanilla-forums
quickfixn
information-hiding
nsurlrequest
famous-engine
livescript
im4java
atg-dynamo
lettuce
fastcgi-mono-server
internet-radio
node-mongodb-native
starling-framework
node-amqp
vline
rbm
cryptarithmetic-puzzle
gssapi
teamsystem
states
jquery-ui-map
erlide
wxperl
virtual-printer
hwnd
dgml
web-widget
rpxnow
wtsapi32
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