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