🍣
【React】SetStateActionを用いて、setStateで変更前の値を利用する
components/childToParent/Parent.tsx
import { useState } from 'react'
import Child from './Child'
export const Parent = () => {
const [animalName, setAnimalName] = useState('dog')
return (
<>
<div>animalName:{animalName}</div>
{animalName === `pig` && <div>子コンポーネントで`pig`を設定しました</div>}
<Child setAnimalName={setAnimalName} />
</>
)
}
export default Parent
components/childToParent/Child.tsx
import { Dispatch, SetStateAction, useEffect } from 'react'
type Props = {
setAnimalName: Dispatch<SetStateAction<string>>
}
export const Child = ({ setAnimalName }: Props) => {
useEffect(() => {
const newAnimalName = `pig`
setAnimalName((name: string) => name + newAnimalName)
}, [])
return <div>子コンポーネント</div>
}
export default Child
説明
準備
reactからの import に SetStateAction, Dispatchを追加。
setStateの関数の型を setAnimalName: Dispatch<SetStateAction<変更前の値の型>> とする。
実行
const newAnimalName = `pig`
setAnimalName((name: string) => name + newAnimalName)
のように、
const newAnimalName = 変更後の値
setState((変更前の値の変数名: 変更前の値の変数型) => 変更前の値の変数名 + 変更後の値)
とする
参考記事
Discussion