title: ReactJs rendering a nested value in an array of objects
body: <p>I am trying to iterate/map through an array of objects and use nested values, but I cannot seem to get it to work. If i pass in a simple array </p>
  
  <pre><code>const people = [
   { name: "joe", id: "1" },
   { name: "mary", id: "2" }
  ];
  </code></pre>
  
  <p>to my ShowList component</p>
  
  <pre><code>const ShowList = (props) =&gt; {
   const {people} = props;
   return ( renderPeep(people))
  };
  
  const renderPeep = (people) =&gt; (
   &lt;ul&gt;
    {people.map((peep, index) =&gt; (
      &lt;li key={index}&gt;{peep}&lt;/li&gt;
     ))}
  &lt;/ul&gt;
   )
  </code></pre>
  
  <p>I get a list of both values: </p>
  
  <pre><code>joe1
  mary1
  </code></pre>
  
  <p>and both dot notation and bracket dont work (<code>{peep.name}</code> ) to just list names. is the map function causing us to lose keys info on the underlying objects? what am I missing? </p>