title: You may have returned undefined, an array or some other invalid object rendering state data
body: <p>Have been facing issue while iterating through a list and printing elements in React.</p>
  
  <p>The React Code is:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class NewComponent extends React.Component {
      constructor(props){
          super(props);
          this.state = {myData: []}
      }
  
      componentWillMount(){
          let data = document.getElementById('demo').innerHTML;
          data = JSON.parse(data);
          this.setState({myData: data});
      }
  
      render() {
          return this.state.myData.map((item) =&gt; {
          return (
              &lt;div&gt;
                  &lt;h3&gt;{item.title}&lt;/h3&gt;
                  &lt;p&gt;{item.description}&lt;/p&gt;
              &lt;/div&gt;
              );
           });
         }
       }
  
  
  ReactDOM.render(
      &lt;NewComponent /&gt;,
      document.getElementById('demo')
   )
  </code></pre>
  
  <p>And I'm getting an error of:</p>
  
  <pre><code>bundle.js:830 Uncaught Error: NewComponent.render(): A valid React element 
  (or null) must be returned. You may have returned undefined, an array or 
  some other invalid object.
  </code></pre>
  
  <p>I'm pretty sure there is some issue with returns in the render function of the
  Not sure what is the issue though.</p>
  
  <p><strong>EDITS</strong></p>
  
  <p>I have made the following edits, the error is not there anymore but nothing is rendering.</p>
  
  <pre><code>renderList() {
  console.log("Running");
  return  this.state.myData.map((item) =&gt; {
      &lt;div&gt;
        &lt;h3&gt;{item.title}&lt;/h3&gt;
        &lt;p&gt;{item.description}&lt;/p&gt;
      &lt;/div&gt;
    });
  }
  
  render() {
      console.log(this.state.myData);
      if(this.state.myData.length)
          return &lt;div&gt;{this.renderList()}&lt;/div&gt;
      else
          return &lt;div&gt;Loading...&lt;/div&gt;
   }
  </code></pre>
  
  <p>In Chrome console I'm getting:</p>
  
  <pre><code>(2) [{…}, {…}]
   0:{_id: {…}, description: "hello", title: "sankit"}
   1:{_id: {…}, description: "lets add some thing new", title: "hi"}
   length:2
   _proto_:Array(0)
  
   Running
  </code></pre>