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

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.

CodePudding user response：

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 states and changes through your custom hook.

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

e.g.

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>

CodePudding user response：

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?

CodePudding user response：

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}/>
        </>
    )
}

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