map関数

return内のlistにデータをずらずら書くのではなくreturnの外にデータは置く

const items = [
{name:"xx" , url:"zzz"},
{name:"xx" , url:"zzz"},
]

map関数によりreturn内がコンパクトになる {}

{bennriLink.map((item) => (
              <div
                key={item.name}
              >
                <a href={item.url} target="_blank">
                  <p className="px-1">{item.name}</p>
                </a>
              </div>
            ))}

エラー

• *1　mapエラーの一番の原因はkey={} をつけていないから
• *2　あと、map関数内で(() ⇒ {} ) 中括弧を使っている場合もエラーになる。この場合はエラー表示が出ないので注意が必要。三項演算の( cond ? a : b )前半が意図せず表示される場合はこのミスが多い

場合によってCSSの内容を変える例

mapの性質は参考演算と相性が良い

<TableCell
              className={
                item.point === "yes" ? "text-red-500" : "text-blue-500"
              }
            >
              {item.point}
</TableCell>

• yesであればtailwindの赤、noならば青

map時に順序を決める例

リスト :

const lists = [{ name: "", color: "" }];

順番通りにする関数 :

const sortedList = lists.sort((first, last) => {
    const Order = ["blue", "red", "yellow"];
    return Order.indexOf(first.color) - Order.indexOf(last.color);
  });

• colorごとに順番で表示する　上記は配列順
• 引数の first, last は任意でよく、単にorder配列の順番通りになる

    const Order = ["blue", "red", "yellow" , ""];

空白が一番上に来るとダサいので最後に “” を追加するといい

↑ これがエラーになる場合：

const Order = ["blue", "red", "yellow"]; の配列内に lists で定義しているものが入っていないとエラーになる

= Orderでは全ての color を網羅する必要あり

一方で、Order内には lists で定義していない color があってもOK