React useStateで 配列を管理

component

import React, { useState } from 'react'


const Basic2 = () => {

  // setProductsは値監視　まず定義
  const [products, setProducts] = useState([])

  const newProducts = () => {

//ここでsetProducts を呼ぶ
    setProducts([
      ...products, {
        id: products.length,
        name: "hello react"
      }])
  }



  return (
    <div>

      <button onClick={newProducts}>add new Product</button>

      <ul>

//mapは配列になっているか確認
        {products.map(product =>
          <li key={product.id}> {product.name} id: {product.id}</li>
        )}
      </ul>

    </div>
  )
}

export default Basic2