title: MuiThemeProvider.render(): A valid React element (or null) must be returned
body: <p>I am using Material UI with React to create a dropdown. If I keep the dropdown component in my <code>src/app.js</code> everything renders fine. However, if I move it to a separate file, <code>fruits.js</code> I get the following errors:</p>
  
  <ol>
  <li><p><code>MuiThemeProvider.render()</code>: A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.</p></li>
  <li><p>Unhandled Rejection (TypeError): Cannot read property '_currentElement' of null</p></li>
  </ol>
  
  <p>Here is my code in <code>app.js</code>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import Fruits from './fruits';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;Welcome to React&lt;/h2&gt;
          &lt;/div&gt;
          &lt;h1&gt;Fruits&lt;/h1&gt;
          &lt;Fruits/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>My code in <code>fruits.js</code>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import DropDownMenu from 'material-ui/DropDownMenu';
  import MenuItem from 'material-ui/MenuItem';
  import injectTapEventPlugin from 'react-tap-event-plugin';
  injectTapEventPlugin();
  
  class Fruits extends Component {
    constructor(props) {
      super(props);
      this.state = {
        msg: '',
        current_fruit_pic: '',
        fruits: []
      };
    }
    componentWillMount(){
      let that = this;
      fetch('http://localhost:3001/fruits',{mode: 'cors'}).then((res)=&gt;{
        res.json().then((data)=&gt;{
          that.setState({
            fruits: data
          })
        });
      });
    }
  
    handleChange = (event, index, value) =&gt; {
      this.setState({
        msg: "you have clicked " + value.type,
        current_fruit_pic: value.img
      },()=&gt; console.log(this.state));
    };
    render() {
      return (
      &lt;MuiThemeProvider&gt;
          &lt;h2&gt;{this.state.msg}&lt;/h2&gt;
          &lt;img className='fruit-image' src={this.state.current_fruit_pic} alt='no fruit chosen'/&gt;
          &lt;br/&gt;
          &lt;DropDownMenu value={this.state.value} onChange={this.handleChange}  openImmediately={true}&gt;
          {
            this.state.fruits.map(function(fruit,i){
              return &lt;MenuItem key={i} value={fruit} primaryText={fruit.type}/&gt;
            })   
          }
          &lt;/DropDownMenu&gt;
      &lt;/MuiThemeProvider&gt;
      );
    }
  }
  
  export default Fruits;
  </code></pre>
  
  <p>My <code>package.json</code>:</p>
  
  <pre><code>{
    "name": "glocomm",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "express": "^4.15.3",
      "material-ui": "^0.18.6",
      "react": "^15.6.1",
      "react-dom": "^15.6.1",
      "react-tap-event-plugin": "^2.0.1"
    },
    "devDependencies": {
      "react-scripts": "1.0.10"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }
  </code></pre>
  
  <p>The data being returned from <a href="http://localhost:3001/fruits" rel="nofollow noreferrer">http://localhost:3001/fruits</a>:</p>
  
  <pre><code>[{"type":"apple","img":"http://images.all-free-download.com/images/graphiclarge/apple_graphic_6815072.jpg"},{"type":"banana","img":"http://img05.deviantart.net/e8a7/i/2015/336/6/4/banana_vector_by_alexismnrs-d9isfz4.png"},{"type":"pear","img":"http://www.pngmart.com/files/1/Pear-Vector-PNG.png"},{"type":"strawberry","img":"http://4vector.com/i/free-vector-strawberry-clip-art_113695_Strawberry_clip_art_hight.png"},{"type":"watermelon","img":"http://www.freepngimg.com/thumb/watermelon/16-watermelon-png-image-thumb.png"}]
  </code></pre>