Reactにおけるスプレット構文（...name）

4103 ワード
スプレッド構文 React React テキストリンク

スプレッド構文

スプレット構文を使うと配列をマージしてくれてとても便利です。

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>
  )
}

実際の動き