I am new to React and React Native and I am trying to build an cooking recipe app. I am trying to update my dish state in DishTabNavigator.js from DishIngredients.js so that I can send the data to firebase from DishTabNavigator.js, however I do not know how I can update the state. I tried lifting the state up but I couldn't do it. Been stuck on this for a day now. Any help would be appreciated

DishTabNavigator.js

```
const Tab = createMaterialTopTabNavigator();

export default function MyTabs({ navigation }) {
  const [dish, setDish] = useState([{ ingredients: [] }]);
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity style={styles.iconright}>
          <Text>Send dish to Firebase</Text>
          <FontAwesome name="save" size={24} color="black" />
        </TouchableOpacity>
      ),
    });
  });
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Ingredient"
        component={DishIngredients}
        ingredients={dish}
      />
    </Tab.Navigator>
  );
}

```

DishIngredients.js

```
class DishIngredients extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ingredients: [],
      textInput: [],
    };
//Add TextInput
  addTextInput = (index) => {
    let textInput = this.state.textInput;
    textInput.push(
      <TextInput
        style={styles.textInput}
        onChangeText={(text) => this.addValues(text, index)}
      />
    );
    this.setState({ textInput });
  };

//Function to add values into the states
  addValues = (text, index) => {
    let dataArray = this.state.ingredients;
    let checkBool = false;
    if (dataArray.length !== 0) {
      dataArray.forEach((element) => {
        if (element.index === index) {
          element.text = text;
          checkBool = true;
        }
      });
    }
    if (checkBool) {
      this.setState({
        ingredients: dataArray,
      });
    } else {
      dataArray.push({ text: text, index: index });
      this.setState({
        ingredients: dataArray,
      });
    }
  };

  //function to console the output
  getValues = () => {
    console.log("Data", this.state.ingredients);
    this.props.ingredients = this.state.ingredients;
    console.log(this.props.ingredients);
  };

  render() {
    return (
      <View>
        <View style={styles.icon}>
          <View style={{ margin: 10 }}>
            <TouchableOpacity>
              <Ionicons
                name="add"
                size={24}
                color="black"
                onPress={() => this.addTextInput(this.state.textInput.length)}
              />
            </TouchableOpacity>
          </View>
          <View style={{ margin: 10 }}>
            <Button title="Remove" onPress={() => this.removeTextInput()} />
          </View>
        </View>
        {this.state.textInput.map((value) => {
          return value;
        })}
        <Button title="Get Values" onPress={() => this.getValues()} />
      </View>
    );
  }
}

export default DishIngredients;

```