{normalizedData.map(obj =>
<div key={obj.display_date_numberic}>
<div>{obj.display_date_numberic}</div>
</div>
{!isEmpty(obj.applicants) && obj.map(obj2 =>
<div className="events">{obj2.person.name}</div>
)}
)}
次の行でエラーが発生します:
{!isEmpty(obj.applicants) && obj.map(obj2 =>
なぜ別のマップ内で map 関数を使用できないのですか? にはnormalizedDataオブジェクトの配列があり、それぞれにobj別のオブジェクトの配列があります。
ベストアンサー1
次のようにして、マップ内にマップを作成できます。
例えば、与えられたデータ
outerArray: [
{ id: '1st', name: 'First', innerArray: [ 'this', 'that' ]},
{ id: '2nd', name: 'Second', innerArray: [ 'some', 'what' ]},
]
JSX を使用できます:
{outerArray.map(outerElement => (
<>
<div>Outer: {outerElement.name}</div>
<ul>
{outerElement.innerArray.map(innerElement => (
<li key={innerElement}>
{innerElement}
</li>
))}
</ul>
</>
))}
レンダリング:
<div>Outer: First</div>
<ul>
<li>this</li>
<li>that</li>
</ul>
<div>Outer: Second</div>
<ul>
<li>some</li>
<li>what</li>
</ul>
マップ内で key= を使用することに注意してください。これにより、React は各ループ反復から要素に対して一意の参照を持つようになります。これを行わないと、警告が表示されます。