Reactを極める！-2023年10月20日分-

朝活は継続していましたが、noteの更新は久しぶりかもしれません！

ちょっと覚えておきたいことを記録しておきます。
(＊2023年10月20日記載)

Reactで配列の要素をjsx内に記載する時の方法です。
使用する考え方は
・mapメソッド
です。

mapメソッドの中ではコールバック関数で
引数に渡ってくるのはそれぞれ配列の要素です。

const animals = ["Dog", "Cat", "Rat"];

const Example = () => {

  const helloAnimals = animals.map((animal) => <li>Hello,{animal}</li>);
  return (
    <>
      <h3>配列の操作</h3>
      <ul>
        {helloAnimals}
      </ul>
    </>
  );
};

export default Example;

いっけんよさそうなんだけど、
検証ツールでコンソールをみると

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

というエラーがでています。

これは、リストにそれぞれキーを持たせなさい！

という意味です。

配列のような繰り返し処理をする場合は、
必ず「keyプロパティ」をつけてあげることが基本だそうです。

ここでkeyプロパティをつけるときの注意点です。
・キーはそれぞれが持った、一意のものにする（他と重複させない）
・あとから変更しない
・配列のインデックスは順序がごちゃつくので絶対使わない

練習問題があったんだけど、
やっぱりまだ自分ひとりですらすらは書けないなぁ…

早く書けるようになりたい！

import Profile from "./components/Profile";

const persons = [
  {
    name: "Geo",
    age: 18,
    hobbies:[ "sports", "music"],
  },
  {
    name:"Tom",
    age:25,
    hobbies:["movie","music"]
  },
  {
    name:"Lisa",
    age:21,
    hobbies:["sports","travel","game"]
  }
];

const Example = () => {
  return (
    <>
      {/* <h3>練習問題</h3>
      <p>Profileコンポーネントを使用して、完成コードと同じ画面を作成してください。</p>
      <p>また、Profileコンポーネント内のリスト表示部分にkeyを設定して、ワーニング表示がされないようにしてください。</p> */}
      <ul>
        {persons.map((p)=> 
          <li key={p.name}>
          <Profile {...p}/>
        </li>
        )}

      </ul>
    </>
  );
};

export default Example;

これを名前でフィルタリングして検索する方法を追記していきます。

filterはindexOfと一緒に使っていきます。

import Profile from "./components/Profile";
import { useState } from "react";

const persons = [
  {
    name: "Geo",
    age: 18,
    hobbies: ["sports", "music"],
  },
  {
    name: "Tom",
    age: 25,
    hobbies: ["movie", "music"],
  },
  {
    name: "Lisa",
    age: 21,
    hobbies: ["sports", "travel", "game"],
  },
];

const Example = () => {

  const [personName, setPersonName] = useState("");
  return (
    <>
      <h3>練習問題</h3>
      <input type="text" value={personName} onChange={(e) => setPersonName(e.target.value)}></input>
      <p>入力欄を設置して、入力値と名前が一致したもののみ表示する仕組みを作成してください。</p>
      <ul>
        {persons
          .filter((person) => person.name.indexOf(personName) !== -1)
          .map((person) => (
          <li key={person.name}>
            <Profile {...person} />
          </li>
        ))}
      </ul>
    </>
  );
};

export default Example;

また続き分は
本日（10月22日）分へ！！