Question 298724 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Child components not restarting one state change of of Parent Component

Parent Component

  • Child Component A
  • Child Component B

when i change the state of Parent component..
the component A and B renders again with their own state.. which was retained
but i want that when i change the state of Wrapper Component
Compoent A and B restart again as if the website was reloaded.. forgeting about their old state
and reset their to initial state
as if website is just loaded

on the basis of state of Wrapper Component

I expect that when i change the state of Parent Component. the children render again .. forgeting their old state… and render as if website is refreshed on the basis of state of Parent state

Tags:

2

Answers


  1. 0

    can you try to pass state from parent component?
    it means your all state will manage in parent

    Login or Signup to reply.
  2. 0

    In React, when the key prop of the Component changes, It unmounts the old Component and mounts a new one.

    I have used clicked state in the parent component and passed it in the dependency array of useEffect hook, whenever you press the click button, clicked state changes, the Parent component will re-render and useEffect toggles the state of key that leads to mount ChildComponent as fresh.

    You can use as many states in the parent component, and all states in the dependency array of useEffect hook.

    useEffect(() => {
    setKey((prev) => !prev);
  }, [state1,state2,state,.....]);

    Parent Component

    import { useEffect, useState } from "react";
import "./styles.css";
import { ChildComponent } from "./ChildComponent";
export default function App() {
  const [clicked, setClicked] = useState(false);
  const [key, setKey] = useState(false);
  useEffect(() => {
    setKey((prev) => !prev);
  }, [clicked]);

  const handleButtonClick = () => {
    setClicked((prev) => !prev);
  };
  return (
    <div className="App">
      <button onClick={handleButtonClick}>click</button>
      <h3>clicked: {clicked ? "Yes" : "No"}</h3>
      <br />
      <ChildComponent key={key} />
    </div>
  );
}

    Child Component

    import React, { useState } from "react";

export const ChildComponent = () => {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);

  const combinednum = `${num1 + num2}`;

  const handleOnAddClick = (value) => {
    if (value === 1) {
      setNum1((prevNum1) => prevNum1 + 1);
    } else if (value === 2) {
      setNum2((prevNum2) => prevNum2 + 2);
    }
  };
  return (
    <div>
      <p>num 1: {num1}</p>
      <button onClick={() => handleOnAddClick(1)}>Add 1</button>
      <p>num 2: {num2}</p>
      <button onClick={() => handleOnAddClick(2)}>Add 2</button>

      <p>Combined num: {combinednum}</p>
    </div>
  );
};

    If you wanna play around with code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search