title: React render error
body: <p>I'm receiving this error when I try to render my nested nav:</p>
  
  <blockquote>
    <p>Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.</p>
  </blockquote>
  
  <p>I'm not sure how to go about rendering my mapped nav correctly. Any help would be appreciated.</p>
  
  <pre><code>let items = [
    { id: 0, name: 'Products', items: [{ id: 2, name: 'M-PET.NET' }, { id: 3, name: 'M-PET.WEB' }]},
    { id: 4, name: 'Services', items: [{ id: 5, name: 'M-PET Hosted' }, { id: 6, name: 'Custom Programming' }]},
    { id: 7, name: 'TurnKey', items: [{ id: 8, name: 'About' }, { id: 9, name: 'Project Management' }, { id: 10, name: 'IT Tasks' }, { id: 11, name: 'Maintenance' }]},
    { id: 12, name: 'Key Industries', items: [{ id: 13, name: 'Transportation' }, { id: 14, name: 'Hospitality' }]},
    { id: 15, name: 'Company', items: ['Team', 'History']},
  ]
  
  class Nav extends Component {
    render() {
      let nav = items.map((item) =&gt; &lt;li node={item} children={item.items} key={item.id}&gt;&lt;/li&gt;)
      console.log(nav)
      return (
        &lt;div&gt;
          &lt;ul className='nav'&gt;
            {nav}
          &lt;/ul&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Nav
  </code></pre>