返すときに、配列内のアイテムを1つずつレンダリングするにはどうすればよいですか？

Question

私はオブジェクトの配列を持っています。

各オブジェクトには、いくつかの文字列と文字列があります。

オブジェクトの文字列の配列を順序付けられていないリストでレンダリングしたいとします。今私が使用している

：上記のコードで

const renderOut = this.props.data.filter(obj => { 
    return this.state.keyToFind.includes(obj.name); 
    }).map((obj, idx) => { 
    return (
    <div key={idx}> 
     <h2>{obj.name}</h2> 
     <ul> 
      <li>{obj.arrayItems}</li> 
     </ul> 
     </div> 
    ); 
}); 

問題は、それがすべての行でobj.arrayItemsアウトレンダリングということです。たとえば...

[ "カップ"、 "ボール"、 "おもちゃ"]

は

....としてcupballtoy

をレンダリングするが、私はそれを取得しようとしています

• カップ
• ボール
• おもちゃ
：見えるように

obj.arrayItemsを1つずつレンダリングする方法はありますか？

Answer 1

はい、文字列をul内のDOM要素に戻すマップ関数を作成します。 Reactでは、これらのコンポーネントを追跡するのに役立つ固有のキーの小道具が必要ですが、この場合は簡単に配列インデックスを使用できます。

{ obj.arrayItems.map((item, i) => <li key={i} >{ item }</li>) } 

Answer 2

ネストマップ機能を使用できます。

const renderOut = this.props.data.filter(obj => { 
return this.state.keyToFind.includes(obj.name); 
    }).map((obj, idx) => { 
    return (
    <div key={idx}> 
     <h2>{obj.name}</h2> 
     <ul> 
     {obj.arrayItems.map(item => <li key={item}>{item}</li>)} 
     </ul> 
     </div> 
    ); 
});