title: Warning: Any use of a keyed object should be wrapped
body: <p>I don't see what is wrong with my code but I got warning of</p>
  
  <p><strong>Any use of a keyed object should be wrapped</strong> </p>
  
  <pre><code>class HelloWorldComponent extends React.Component {
  
    constructor(){
      super()
      this.handleChange = this.handleChange.bind(this)
    }
  
    handleChange(e){
      console.log(e.target.value)
    }
  
    render() {
      const data = {
        "fruits":[
          {"name":"banana","value":true},
          {"name":"watermelon","value":false},
          {"name":"lemon","value":true},
        ]
      }
      return (      
          {data.fruits.map(obj =&gt; 
           &lt;div&gt;
             &lt;label&gt;{obj.name}&lt;/label&gt;
             &lt;input onChange={(e) =&gt; this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/&gt;
           &lt;/div&gt;
           )}
      );
    }
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/nuzeqinave/1/edit?html,js,console,output" rel="nofollow noreferrer">http://jsbin.com/nuzeqinave/1/edit?html,js,console,output</a></p>
  
  <p>What is wrong here?I did wrap everything in a <code>&lt;div&gt;</code></p>