Reactのmap処理とkeyの使い方

Reactの配列処理

Reactを使うとフロントエンドで同じ繰り返しの値の処理を簡単に実装することができます。

事前知識

• HTML基礎
• JavaScriptの基礎
• Reactの基礎

これらの前提知識がある定で話していきます。
今回はReactのフレームワークのNext.jsで実装していきます！！

npm init next-app アプリ名

まずさくっとNext.jsを立ち上げます。
エラー出た方は

node -v
yarn -v
npm -v

こちらを確かめましょう

次にcomponetsディレクトリーを作成し、その配下にitemsのコンポーネントのディレクトリを作成します。

cd アプリ名
mkdir components
cd conmponents
mkdir items
cd items
touch index.jsx

items/index.jsx

import React from "react";
const ITEMS = [
  {
    id: 1,
    title: "一番最初のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 2,
    title: "2番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 3,
    title: "3番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
]
const Items = () => {
  return (
    <React.Fragment>
      {ITEMS.map((item) => {
        return (
        <div>
          <p>{ item.title }</p>
          <p>{ item.body }</p>
        </div>
        )
      })}
    </React.Fragment>

  )
}
export default Items

いったん実装します。
説明としてITEMSの配列を定義し、その中でループさせたい処理を書いていきます。
その後mapメソッドでITEMSの中身を返します。
(この時自分はmapの後のreturnを忘れて、永遠と表示されない自体がおきました、、、見逃さずに)

Itemsコンポーネントはしっかりexportしましょう。

pages/index.js

import Items from "../components/items"

export default function Home() {
  return (
    <>
      <Items></Items>
    </>
  )
}

Itemsコンポーネントをインポートします。
<>>はの省略記法です。
どちらでも大丈夫ですが、書く際はどちらかに統一しましょう。

できたーー！！！
、、、、、、、むむっ

エラーが出ていますね。

Warning: Each child in a list should have a unique "key" prop
keyがないよーと警告が出ています。

https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings
参考記事
Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays:

配列の中のキーは兄弟間で一意である必要があります。

結論→親要素にkeyを設定すると解決する

pages/index.jsx

import React from "react";
const ITEMS = [
  {
    id: 1,
    title: "一番最初のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 2,
    title: "2番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 3,
    title: "3番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
]
const Items = () => {
  return (
    <React.Fragment>
      {ITEMS.map((item) => {
        return (
        <div key={item.id}>
          <p>{ item.title }</p>
          <p>{ item.body }</p>
        </div>
        )
      })}
    </React.Fragment>

  )
}
export default Items

ちなみにキーはindexでも渡すことができますが、こちらはあまり推奨されていないようです。