How do I change state of another component from different component in react native?

Question

I am creating a todo app in which a dialog is to be shown when button is clicked and when the button cancel is clicked it need to be dismissed. I have two components which are:

AddTodo.js

import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { GetInfoDialog } from "./GetInfoDialog";
import { React, useState } from "react";


function useChange() {
  const [state, setState] = useState(false);
  function change(value) {
    setState(value);
    console.log("state: " + value);
  }

  return { state, change };
}

function AddTodo() {
  const { state, change } = useChange();

  return (
    <View style={styles.container}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={state}
        style={styles.itemsContainer}
      >
        <GetInfoDialog />
      </Modal>

      <TouchableOpacity
        style={styles.btn}
        onPress={() => {
          change(true);
          // console.log("btn click: " + clicked);
        }}
      >
        <Text style={styles.text}>Add New</Text>
      </TouchableOpacity>
    </View>
  );
}

and GetDialogInfo.js

import react, { useState } from "react";
import { useChange } from "./AddTodo";
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";

function GetInfoDialog() {
  const { state, change } = useChange();

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Add Todo</Text>
      <TextInput style={styles.input} />
      <View style={styles.btnContainer}>
        <TouchableOpacity style={styles.btn}>
          <Text style={styles.text}>Add</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.btn}
          onPress={() => {
            change(false);
          }}
        >
          <Text style={styles.text}>Cancel</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

I am try to change the state using the change function but the state is not getting changed.

Answer 1

The useChange function you have written is working as a custom hook. It doesn't connect the two components. Can I know what is your requirement?

Answer 2

You are trying to share state and change in the different components: AddTodo and GetInfoDialog by const { state, change } = useChange();

But it's not possible in your app because you actullay created 2 state s and change s through your custom hook.

To share it, you need to define them once and pass them as props into GetInfoDialog .

eg

GetInfoDialog({state, change})  {

  // Remove the below line and get state and change from props.
  // const { state, change } = useChange();
  ...
  ...
}

And pass state and change created in your AddTodo .

     <Modal
        animationType="slide"
        transparent={true}
        visible={state}
        style={styles.itemsContainer}
      >
        <GetInfoDialog state={state} chagne={change} />
      </Modal>

Answer 3

1. The components can either be 2 children of a parent component or one of them is a child of the other, where you put the shared state in the parent component and pass it the child as a prop.

const ParentComponent = () => {
    const [someState, setSomeState] = useState()
    return (
        <>
            <ComponentOne someState={someState} setSomeState={setSomeState}/>
            <ComponentTwo someState={someState} setSomeState={setSomeState}/>
        </>
    )
}

2. Using React Context to share the state between components (Not recommended unless you know the performance drawbacks and how to mitigate them)
3. Using a 3rd party state management library (zustand, redux toolkit, etc)