[解決済み] Reactでオブジェクトの配列をマップする方法

質問

オブジェクトの配列があります。 このオブジェクトの配列をマッピングしたいのですが、どうすればよいですか？配列をマッピングする方法は知っていますが、オブジェクトの配列をマッピングする方法がわかりません。 以下は、私がこれまでに行ったことです。

マッピングしたいオブジェクトの配列 :

const theData = [
    {
        name: 'Sam',
        email: '[email protected]'
    },

    {
        name: 'Ash',
        email: '[email protected]'
    }
]

私のコンポーネント:

class ContactData extends Component {
    render() {
        //works for array
        const renData = this.props.dataA.map((data, idx) => {
            return <p key={idx}>{data}</p>
        });

        //doesn't work for array of objects
        const renObjData = this.props.data.map(function(data, idx) {
            return <p key={idx}>{data}</p>
        });

        return (
            <div>
                //works
                {rennData}
                <p>object</p>
                //doesn't work
                {renObjData}
            </div>
        )
    }
}


ContactData.PropTypes = {
    data: PropTypes.arrayOf(
        PropTypes.obj
    ),
    dataA: PropTypes.array
}

ContactData.defaultProps = {
    data: theData,
    dataA: dataArray
}

何が足りないのでしょうか？

解決方法は？

必要なのは、オブジェクトの配列をマップすることです。すべての項目がオブジェクトであることを忘れないように、例えばドット記法を使用してオブジェクトの値を取得します。

コンポーネントで

 [
    {
        name: 'Sam',
        email: '[email protected]'
    },

    {
        name: 'Ash',
        email: '[email protected]'
    }
].map((anObjectMapped, index) => {
    return (
        <p key={`${anObjectMapped.name}_{anObjectMapped.email}`}>
            {anObjectMapped.name} - {anObjectMapped.email}
        </p>
    );
})

また、jsxの配列を置くと、それは別の意味を持ち、renderメソッドにオブジェクトを置くだけでなく、配列を置くことができることを忘れないでください。

の私の回答をご覧ください。 配列をjsxにマッピングする