How to map an array of objects in React
<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>