title: How to map an array of objects in React
body: <p>I have an array of objects.  I would like to map this array of objects. I know how to map an array, but can't figure out how to map an array of objects.  Here is what I have done so far : </p>
  
  <p>The array of objects I want to map : </p>
  
  <pre><code>const theData = [
      {
          name: 'Sam',
          email: 'somewhere@gmail.com'
      },
  
      {
          name: 'Ash',
          email: 'something@gmail.com'
      }
  ]
  </code></pre>
  
  <p>My component : </p>
  
  <pre><code>class ContactData extends Component {
      render() {
          //works for array
          const renData = this.props.dataA.map((data, idx) =&gt; {
              return &lt;p key={idx}&gt;{data}&lt;/p&gt;
          });
  
          //doesn't work for array of objects
          const renObjData = this.props.data.map(function(data, idx) {
              return &lt;p key={idx}&gt;{data}&lt;/p&gt;
          });
  
          return (
              &lt;div&gt;
                  //works
                  {rennData}
                  &lt;p&gt;object&lt;/p&gt;
                  //doesn't work
                  {renObjData}
              &lt;/div&gt;
          )
      }
  }
  
  
  ContactData.PropTypes = {
      data: PropTypes.arrayOf(
          PropTypes.obj
      ),
      dataA: PropTypes.array
  }
  
  ContactData.defaultProps = {
      data: theData,
      dataA: dataArray
  }
  </code></pre>
  
  <p>What am I missing ?</p>