Reactで配列の通し番号を取得したい

Question

前提・実現したいこと

配列で取得した順に1, 2, 3...のような番号を取得したいと考えています。
具体的には、1の場合は文字色をred、2の場合は文字色をblueで表示します。

ソースコード

      items: [
        {
          name: 'React',
          chosen: false,
        },
        {
          name: 'Redux',
          chosen: false,
        }
      ],

const ItemList = ({ items }) => (
  items.map(item => (
    <p>{item.id}</p>
    <p>{item.name}</p>
  ))
);

配列は順次追加されていくため、配列の中にidを指定する方法は使えません。
id部分に数字を出したく、また色を変更する為に、1の場合は赤、2の場合は青といったif文を書く必要があると考えています。

おたすけくださいませ。

Answer 1

mapコールバックの第二引数が、配列のインデックスになります。

items.map((item, index) => (
  <p className={index %2 ? "redText" : "blueText"}>{index}</p>
  <p>{item.name}</p>
))

色変更のclassは任意で、ご定義を！

Comments

[k10a]

ありがとうございます！