😏

【React Native】子コンポーネントから親コンポーネントのStateを更新する

2023/03/12に公開

どうも〜つぶあんです。
React Nativeで親コンポーネントから子コンポーネントに値を受け渡すのはわかりやすいけどその逆の子から親コンポーネントのStateを更新する方法がわからなかったので、自分用にメモ書き。

記述例

親コンポーネント(Parent)、子コンポーネント(Child)を作成し、以下のように記述。

Parent.js

import { Text, View } from 'react-native'
import React, { useState } from 'react'
import Child from './components/Child';

const Parent = () => {
  const [text, setText] = useState("");

  return (
    <View>
      <Child setText={setText} />
      <Text>{text}</Text>
    </View>
  )
}
export default Parent
Child.js

import { Text, View } from 'react-native'
import React from 'react'

const Child = (props) => {
  return (
    <View>
      <Text>{props.setText("つぶあん")}</Text>
    </View>
  )
}
export default Child

解説

親のState関数(setText)を以下のように子に渡し、

<Child setText={setText} />

子で受け取ったsetTextを使って値を更新することで、

props.setText("つぶあん")

子コンポーネントから親コンポーネントのStateを更新できます。

なるほどねー。

Discussion