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