スプレッド構文
スプレット構文を使うと配列をマージしてくれてとても便利です。
mapメソッドも使ってすべての要素をブラウザに表示させてみます。
Spread.js
import React, { useState } from 'react'
export const Spread = () => {
const [items, setItems] = useState([]);
const addItem = () => {
setItems([...items,
{
id: items.length,
value: Math.floor(Math.random() * 10) + 1
}])
}
return (
<div>
<button onClick={addItem}>Add a number</button>
<ul>
{
items.map((item) =>
<li key={item.id} >id: {item.id} ; Number {item.value}</li>)
}
</ul>
</div>
)
}