MuiThemeProvider.render(): A valid React element (or null) must be returned

Question

I am using Material UI with React to create a dropdown. If I keep the dropdown component in my src/app.js everything renders fine. However, if I move it to a separate file, fruits.js I get the following errors:

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

2. Unhandled Rejection (TypeError): Cannot read property '_currentElement' of null

Here is my code in app.js :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Fruits from './fruits';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <h1>Fruits</h1>
        <Fruits/>
      </div>
    );
  }
}

export default App;

My code in fruits.js :

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)=>{
      res.json().then((data)=>{
        that.setState({
          fruits: data
        })
      });
    });
  }

  handleChange = (event, index, value) => {
    this.setState({
      msg: "you have clicked " + value.type,
      current_fruit_pic: value.img
    },()=> console.log(this.state));
  };
  render() {
    return (
    <MuiThemeProvider>
        <h2>{this.state.msg}</h2>
        <img className='fruit-image' src={this.state.current_fruit_pic} alt='no fruit chosen'/>
        <br/>
        <DropDownMenu value={this.state.value} onChange={this.handleChange}  openImmediately={true}>
        {
          this.state.fruits.map(function(fruit,i){
            return <MenuItem key={i} value={fruit} primaryText={fruit.type}/>
          })   
        }
        </DropDownMenu>
    </MuiThemeProvider>
    );
  }
}

export default Fruits;

My package.json :

{
  "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"
  }
}

The data being returned from http://localhost:3001/fruits :

[{"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"}]

Answer 1

<MuiThemeProvider> can only have one child, or else it will throw an error, so wrap it in a <div> :

<MuiThemeProvider>
  <div>
    <h2>{this.state.msg}</h2>
    <img className='fruit-image' src={this.state.current_fruit_pic} alt='no fruit chosen' />
    <br />
    <DropDownMenu value={this.state.value} onChange={this.handleChange}  openImmediately={true}>
      {
        this.state.fruits.map(function(fruit, i) {
          return <MenuItem key={i} value={fruit} primaryText={fruit.type} />
        })   
      }
    </DropDownMenu>
  </div>
</MuiThemeProvider>