子コンポーネントで最新のstate値を更新して表示する方法

Question

前提・実現したいこと

react nativeでアプリ開発をしています。

親コンポーネントで、AとBの数字を合計し、その値を子コンポーネントで表示する動き（下記の流れ）を実装したいです。

１：親コンポーネントでAとBの値を入力
２：親コンポーネントでonPressメソッドを利用し、AとBの値を合計
３：その合計値を子コンポーネントで表示

発生している問題・エラーメッセージ

最初に画面が表示されたときは、propsで渡されている合計の値（０）は表示されますが、
AとBの値を計算した後に、再度子コンポーネントへ最新の合計の値を渡す方法がわかりません。

onPressを実行したなどに、最新の値を更新し、表示するにはどうすれば良いでしょうか？

方法についてご存知の方おりましたら、ご教授いただけないでしょうか？

該当のソースコード

親コンポーネントのClass

import React from "react";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import TestSum from "../components/TestSum";

class TestRender extends React.Component {
  state = {
    numberA: "0",
    numberB: "0",
    numberSum: "0",
  };

  handleCalculate(a, b) {
    let sum = a + b;
    this.setState({ numberSum: sum });
  }

  render() {
    return (
      <View>
        <TestSum sum={this.state.numberSum} />

        <Text>Aの数字を入力</Text>
        <TextInput
          value={this.state.numberA}
          onChangeText={(text) => {
            this.setState({ numberA: text });
          }}
        ></TextInput>

        <Text>Bの数字を入力</Text>
        <TextInput
          value={this.state.numberB}
          onChangeText={(text) => {
            this.setState({ numberB: text });
          }}
        ></TextInput>

        <TouchableOpacity
          onPress={(a, b) => {
            this.handleCalculate(a, b);
          }}
        >
          <Text>計算する</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default TestRender;

子コンポーネントのClass

import React from "react";
import { View, Text } from "react-native";

class TestSum extends React.Component {
  state = {
    sum: "",
  };
  constructor(props) {
    super(props);
    this.state = {
      sum: props.sum,
    };
  }

  render() {
    console.log(this.state.sum);
    return (
      <View>
        <Text>合計</Text>
        <Text>{this.state.sum}</Text>
      </View>
    );
  }
}

export default TestSum;

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

class componetから function componentへ変更し、
useEffectの副作用のタイミングを、propsの変化を条件することで対応しました。

親のコンポーネント

import React, { useState } from "react";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import TestSum from "../components/TestSum";

export default function TestRender() {
  const [numberA, setNumberA] = useState(0);
  const [numberB, setNumberB] = useState(0);
  const [totalNumber, setTotalNumber] = useState(0);

  function handleCalculate() {
    setTotalNumber(parseInt(numberA) + parseInt(numberB));
  }

  return (
    <View>
      <TestSum total={totalNumber} />

      <Text>Aの数字を入力</Text>
      <TextInput
        value={String(numberA)}
        onChangeText={(text) => {
          setNumberA(text);
        }}
      ></TextInput>

      <Text>Bの数字を入力</Text>
      <TextInput
        value={String(numberB)}
        onChangeText={(text) => {
          setNumberB(text);
        }}
      ></TextInput>

      <TouchableOpacity
        onPress={() => {
          handleCalculate();
        }}
      >
        <Text>計算する</Text>
      </TouchableOpacity>
    </View>
  );
}

子のコンポーネント

import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";

export default function TestSum(props) {
  const [totalNumber, setTotalNumber] = useState(props.total);

  useEffect(() => {
    setTotalNumber(props.total);
  }, [props.total]);

  return (
    <View>
      <Text>合計</Text>
      <Text>{totalNumber}</Text>
    </View>
  );
}