勉強内容:useState3

この記録も3日目です(๑>◡<๑)
三日坊主を避けるべく明日も投稿頑張ろう！

import { useState } from 'react';
type ProductsType = {
  id: number;
  name: string;
}[];

const UseState3 = () => {
  const [products, setProducts] = useState<ProductsType>([]);
  const newProducts = () => {
    setProducts([
      ...products,
      {
        id: products.length,
        name: 'こんにちはReact',
      },
    ]);
  };

  return (
    <div>
      <button onClick={newProducts}>新しいプロダクト</button>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} id:{product.id}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UseState3;

配列の型を定義する場合 →}[];のようにしめる。
setProducts([...products,
{
id: products.length,
name: 'こんにちは React',
},
→ 前回と同じく配列を分解するためにスプレット構文で要素を分解している
(値をコピーし新しいオブジェクトを生成しているの方が正しいかも。)
{products.map((product)→ 配列をループして処理している。for と同じ。