■前提
Reactの実行環境がある。
App.jsでsample.jsをimport及び呼びだすコードがある。
■以下前提のコード
sample.js
import React, {useState} from 'react'
const sample= () => {
}
export default sample
■以下state(sampleobject)とstateを更新するための関数(setsampleobject)を定義する。
また、値を追加していく変数（newsampleobject）も定義する。
sample.js
import React, {useState} from 'react'
const sample= () => {
const [sampleobject, setsampleobject] = useState([])
const newsampleobject = () => {
setsampleobject([...sampleobject,{
id: sampleobject.length,
name: "Hello"
}])
}
return (
<>
</>
)
}
■以下ボタンと配列の内容を展開する処理を追加。
sample.js
import React, {useState} from 'react'
const sample= () => {
// 以下オブジェクト（sampleobject, setsampleobject）を定義する。
const [sampleobject, setsampleobject] = useState([])
const newsampleobject = () => {
setsampleobject([...sampleobject,{
id: sampleobject.length,
name: "Hello"
}])
}
return (
<div>
<button onClick={newsampleobject}>Add New sampleobject</button>
<ul>
{sampleobject.map(sampleobject =>(
<li key={sampleobject.id}>{sampleobject.name} id: {sampleobject.id}</li>
))}
</ul>
</div>
)
}
■結果
ボタンを押すと、Hello id: 連番 が表示される。
↧