mapのよくあるエラー

Reactでよくあるmapのエラー：

map内で一番外側のタグに key={} をつけていない場合
return無しで中括弧を使っている場合：(() ⇒ {} )
- { } を使うならreturnが必要
  - { return (<></>) }
- { } を使うケース
  - map内で関数を定義する場合など
状態管理しているデータの初期値を空文字にしている場合
- mapは配列にしか使えないので初期値を空配列にすること： useState([])

NodeListにmapは使えない

NodeListを返す関数は、querySelectorAll()やelement.childNodes

Set オブジェクトは、プリミティブ値やオブジェクト参照を問わず、あらゆる型で多数の一意の値を格納することができます。

手順：

例1：一意のcategory

const uniqueCategories = Array.from(
        new Set(data.map((item) => (item.category === "" ? "未分類" : item.category)));

例2：数字が入った配列

const array = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = Array.from(new Set(array));
console.log(uniqueArray); // [1, 2, 3, 4, 5]

posts.map((post) => (
  <div key={post.title}>
    <h2>{post.title}</h2>
    <p>{post.content}</p>
  </div>
));

--> 分割代入を使う：

posts.map(({ id, title, content }) => (
  <div key={id}>
    <h2>{title}</h2>
    <p>{content}</p>
  </div>
));

更にオブジェクトがある場合：

posts.map(({ id, title, author:{ name , age }}))

変数をmap関数内で定義する場合：

{Links.map((link) => {
  const linkName = link.name.toUpperCase();
  return <li key={link.id}>{linkName}</li>;
})}

return { } を省略しない場合：

{Links.map((link) => {
  return <li key={link.id}>{linkName}</li>;
})}

{images.map((_, index) => (
  ))}