title: React render: Objects are not valid as a React child
body: <p>Please help me. I don't know why this piece of code doesn't work.</p>
  
  <p>It gives me an error: "Objects are not valid as a React child (found: object with keys {itemss}). If you meant to render a collection of children, use an array instead."
    Why {i.title} is an object. It's just a string. How can i fix this? and How actually I can iterate nested objects?</p>
  
  <pre><code>class ShopItem extends React.Component {
  
  render() {
      var items = [
          {
              link: 'first link',
              title: 'Emery NEM XF',
              price: '$950'
          },
          {
              link: 'second link',
              title: 'Emery NEM XF',
              price: '$950'
          },
          {
              link: 'third link',
              title: 'Emery NEM XF',
              price: '$950'
          }
      ];
  
  
       const item = items.map((i) =&gt;{
  
            return ( &lt;h1&gt;{i.title}&lt;/h1&gt; )
      });
  
          return (
              {items} 
          )
    }
  }
  
  ReactDOM.render(&lt;ShopItem /&gt; , document.querySelector('#root'));
  </code></pre>