Reactでmap関数について勉強したのでまとめてみる

まずは、箇条書きの形式でyamanoteLineを表示したい

function App() {
  const yamanoteLine = ["駒込", "田端", "西日暮里", "日暮里", "鶯谷"];   // (A)

  const listItem = yamanoteLine.map((nameOfStation) => (   // (B)
    <li>{nameOfStation}</li>
  )); 

  return <ul>{listItem}</ul>;   // (C)
}

(A)

今回使うyaemanoteLine配列を作成。

(B)

yamanoteLineの各要素を<li>要素に入れた、新しい配列listItemを作成。

(C)

その配列listItemを<ul>要素に入れる。

結果

とりあえず最初にやりたかったことはできた。
しかし、

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
    at li
    at App

このような警告文が出てくる。和訳すると、

リストの各子要素はユニークなkey要素を持っていないといけません。

map関数の第二引数にindexを追加し、<li>タグにkey={index}を追加。

訂正後

function App() {
  const yamanoteLine = ["駒込", "田端", "西日暮里", "日暮里", "鶯谷"];

  const listItem = yamanoteLine.map((nameOfStation, index) => (
    <li key={index}>{nameOfStation}</li>
  ));

  return <ul>{listItem}</ul>;
}

これで警告文は出なくなった。

次に、「〇番目は〇〇」と表示したい

山手線に順序をつけることがどうなのかは置いといて、とりあえずやってみる。

function App() {
  const yamanoteLine = ["駒込", "田端", "西日暮里", "日暮里", "鶯谷"];

  const listItem = yamanoteLine.map((nameOfStation, index) => (
    <li key={index}>{index+1}番目は{nameOfStation}</li>
  ));

  return <ul>{listItem}</ul>;
}

結果

特にエラーもなく、理想通りに動いてくれた。

map関数についてわかったことまとめ

• map関数は配列の中身をすべて取り出し、新しい配列を作ってくれる。
• 第１引数は配列の要素、第２引数は要素の添字である。
• 楽！