Material-ui: Cannot read property 'prepareStyles' of undefined

[nileshgulia1]

I dont know why this error is coming...
Here is my code:

import React, {Component} from 'react';
import AutoComplete from 'material-ui/AutoComplete';



 class App extends Component {
 constructor(props){
   super(props);
   this.state={
    dataSource: []
   };
   this.handleUpdateInput=this.handleUpdateInput.bind(this);
 }

  handleUpdateInput(value) {
    this.setState({
      dataSource: [
        "Hello" + value,
        value + value,
        value + value + value,
      ],
    });
  };

  render() {
    return (
      <div>


        <AutoComplete
          hintText="Type anything You Want"
          dataSource={this.state.dataSource}
          onUpdateInput={this.handleUpdateInput}
        />
        <AutoComplete
          hintText="Type anything"
          dataSource={this.state.dataSource}
          onUpdateInput={this.handleUpdateInput}
          floatingLabelText="Full width"
          fullWidth={true}
        />

      </div>
    );
  }
}
export default App;

[oliviertassinari]

Do you have any warning in the console? You most likely miss the theme provider.

[nileshgulia1]

Hello @oliviertassinari ,
After adding MuiThemeProvider

import React, {Component} from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


 class App extends Component {
 constructor(props){
   super(props);
   this.state={
    dataSource: []
   };
   this.handleUpdateInput=this.handleUpdateInput.bind(this);
 }

  handleUpdateInput(value) {
    this.setState({
      dataSource: [
        "Hello" + value,
        value + value,
        value + value + value,
      ],
    });
  };

  render() {
    return (
      <div>
      <MuiThemeProvider>


        <AutoComplete
          hintText="Type anything You Want"
          dataSource={this.state.dataSource}
          onUpdateInput={this.handleUpdateInput}
        />
        <AutoComplete
          hintText="Type anything"
          dataSource={this.state.dataSource}
          onUpdateInput={this.handleUpdateInput}
          floatingLabelText="Full width"
          fullWidth={true}
        />
        </MuiThemeProvider>

      </div>
    );
  }
}
export default App;

    this error is shown

MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

[oliviertassinari]

You need to take care of this new warning. Yes, you are providing a react node, not an element.

[nileshgulia1]

@oliviertassinari Thanks, It helped me to fix my error..