Question 35417 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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?

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0
    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}/>
        </>
    )
}
    1. Using React Context to share the state between components (Not recommended unless you know the performance drawbacks and how to mitigate them)
    2. Using a 3rd party state management library (zustand, redux toolkit, etc)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search