Где я должен использовать setState?

Question

В моем собственном родном проекте я пытаюсь сделать базовый c конвертер валют. В доме. js вы можете увидеть компонент с именем InputWithButton. Этот компонент имеет кнопку, которая имеет buttonText и имеет значение baseCurrency. Когда я нажимаю эту кнопку, открывается экран CurrencyList. В CurrencyList есть плоский список, который имеет значения валюты. Я могу выбрать значение в flatlist в CurrencyList, и я могу отправить это значение на домашний экран с помощью this.props.navigation.navigate('Home',{selected:item}), но когда я возвращаюсь на домашний экран с кнопкой назад, я не знаю, как изменить значение buttonText в компоненте InputWithButton. я не знаю, где мне использовать setState?

Home. js

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
import {InputWithButton} from '../components/TextInput';

//const TEMP_BASE_CURRENCY = 'USD';
//const TEMP_CONVERT_CURRENCY = 'GBP';

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      baseCurrency: 'TRY', //Başlangıç olarak sayfa açıldığında gelecek olan değerler
      convertCurrency: 'USD',

      amount: null,
      result: '',
      date: '',
    };
    //const selected = this.props.route.params;
  }

  calculate = () => {
    const amount = this.state.amount;

    let url =
      'https://api.exchangeratesapi.io/latest?base=' + this.state.baseCurrency;
    fetch(url, {
      method: 'GET',
    })
      .then((res) => res.json())
      .then((data) => {
        const date = data.date;
        const result = (
          data.rates[this.state.convertCurrency] * amount
        ).toFixed(2);

        this.setState({
          result,
          date,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  handleChangeText = (text) => {
    //Yazıda değişim algılandığında api işlemleri başlasın

    this.setState(
      {
        amount: text,
      },
      this.calculate,
    );
  };

  handlePressBaseCurrency = () => {
    //flatlist sayfası açılsın
    const {navigation} = this.props;
    navigation.navigate('CurrencyList');
  };

  handlePressConvertCurrency = () => {
    //flatlist sayfası açılsın
  };

  render() {
    const {baseCurrency, convertCurrency, result} = this.state;
    return (
      <View>
        <InputWithButton
          buttonText={baseCurrency}
          onPress={this.handlePressBaseCurrency}
          keyboardType="numeric"
          onChangeText={(text) => this.handleChangeText(text)}
        />
        <InputWithButton
          editable={false}
          buttonText={convertCurrency}
          onPress={this.handlePressConvertCurrency}
          value={result}
        />
        <Button
          title="Ceviri"
          onPress={() => this.props.navigation.navigate('Ceviri')}
        />
      </View>
    );
  }
}

export default Home;

CurrencyList. js

import React, {Component} from 'react';
import {View, FlatList, Text} from 'react-native';
import currencies from '../data/currencies';

import {ListItem, Separator} from '../components/List';
const temp_base_currency = 'CAD';

class CurrencyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: '',
    };
  }

  handlePress = (item) => {
    this.setState({
      selectedItem: item, //__
    });
    // const {navigate} = this.props.navigation;
    // navigate('Home', {clickedItem: this.state.selectedItem});

    //Tıklandığında beklesin

    this.props.navigation.navigate('Home', {selected: item}); //__
  };

  render() {
    return (
      <View>
        <FlatList
          renderItem={({item}) => (
            <ListItem
              onPress={() => this.handlePress(item)}
              text={item}
              selected={item === this.state.selectedItem} //__
            />
          )}
          data={currencies}
          keyExtractor={(item) => item}
          ItemSeparatorComponent={Separator}
        />
      </View>
    );
  }
}

export default CurrencyList;