3/1-2

useStateでオブジェクト（辞書、ディクショナリ）を使う

formで変更できるようにする

1. useStateの初期値で空のディクショナリを定義する
2. formタグ内にinputタグで処理する

• 処理

const [product,setProducts] = useState({name:"",price:""})

<form>
<input type="text" value={product.name} onChange=   

                                                    {evt=>setProducts({...product,name:evt.target.value})}/>
<br></br>
<input type="text" value={product.price} onChange=

                                                  {evt =>setProducts({...product,price:evt.target.value})}/> 
</form>
        <h1>Product name is {product.name} </h1>
        <h1>Product name is {product.price}</h1>

• value={product.name}
  • valueで空のオブジェクトの要素を指定する

• onChange= {evt=>setProducts()}

  • 状態が変更された時次の処理をおこなう
• {...product,price:evt.target.value}
  • ...product
    • オブジェクトを丸ごと呼び出す
  • ,price: 
    • オブジェクトのpriceを指定
  • evt.target.value
    • valueの値をpriceへ
• {product.price}
  • productオブジェクトのpriceを呼び出す