title: Object key is undefined in loop map react render
body: <p>I can access the whole object like </p>
  
  <pre><code>&lt;Card.Content&gt;{_this.state.index}&lt;/Card.Content&gt;
  </code></pre>
  
  <p>It says Invariant Violation: Objects are not valid as a React child (found: object with keys {name, title, email, phone, photo, officename, manageremail}). </p>
  
  <p>But that's not my goal, I simply want to render one of the keys</p>
  
  <pre><code> const componentsMobile = this.state.components.map(item =&gt; (
        &lt;Card fluid key={index}&gt;
          &lt;Card.Content&gt;
            &lt;Card.Header&gt;{item.value.label}&lt;/Card.Header&gt;
          &lt;/Card.Content&gt;
          &lt;Card.Content extra&gt;{_this.state.index.email}&lt;/Card.Content&gt;
          {/* &lt;Card.Content extra&gt;{_this.state.index.value[item.source]}&lt;/Card.Content&gt; */}
        &lt;/Card&gt;
   ))
  </code></pre>
  
  <blockquote>
    <p>index.cjs.js:798 Uncaught TypeError: Cannot read property 'email' of
    undefined</p>
  </blockquote>
  
  <p>I am not sure why it's undefined</p>