[解決済み] ReactJSでオブジェクトを介してマッピングするにはどうすればよいですか？

質問

このような回答がありました。

このHTMLの中に、各オブジェクトの名前を表示したいのですが。

{subjects.map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">{ item.name }</span>
  </li>
))}   

というエラーを投げますが subjects.map is not a function .

まず、オブジェクトのキーを定義して、キーの配列を作成し、そこでループして subject.names .

また、私が試したのは、これです。

{Object.keys(subjects).map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">key: {i} Name: {subjects[i]}</span>
  </li>
))}

解決方法は？

を呼び出すと Object.keys は、そのオブジェクトのキーの配列を返します。

Object.keys({ test: '', test2: ''}) // ['test', 'test2']

を呼び出すと Array#map を渡すと、その関数は2つの引数を与えます。

1. 配列の中の項目。
2. 項目のインデックス。

データを取得したいときは item (または、以下の例では keyName の代わりに i

{Object.keys(subjects).map((keyName, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">key: {i} Name: {subjects[keyName]}</span>
    </li>
))}