CODEWITHSUNDEEP
reactjs
K.Z
K.Z

Reputation: 5075

How to pass value from child to parent component

I got react component which is calling two child components. The result to show on child component B is depends upon the child component A data and event.

User click on table record in child component A, then needs to pass back to parent component, followed by child component B and refresh it.

parent component

const EziTrackerStatus = () =>{
 //..
  return (
  <div>
   <div>
     <EziSchedule></EziSchedule>
   </div>
   <div>
      <EziTransaction></EziTransaction>
   </div>

Child Component A

in child component A, following method call when click on row. I need to pass this data to parent and then child component B

  const EziSchedule = () =>{
   //other code

   const selectedRow = (row: any) => { 
  console.log("schedule clicked", row); //Pass this to Parent and then EziTransaction 'ComponentB'
  };

Child Component B

const EziTransaction = () =>{

Upvotes: 1

Views: 99

Answers (2)

Dupocas
Dupocas

Reputation: 21297

React has a top-down data-flow. Which means that data should only be passed to children from parent component. Never otherwise.

React is all about one-way data flow down the component hierarchy. Thinking in React

So if you stumbled in a situation where you need to pass data from the child, maybe you've got something wrong. Usually children only access and modify a parent's state, but they never are the source of true of that state. It goes something like that

const Parent = () =>{
     const [foo, setFoo] = useState('foo')

     return <Child foo={foo} setFoo={setState} />
}

const Child = ({ foo, setFoo }) =>{
    return <button onClick={() => setFoo('bar')}>{foo}</button>
}

Horizontal data-flow is also bad. So lift the state up to the next common parent and distribute it from them

const Parent = () =>{
     const [foo, setFoo] = useState('foo')

     return(
         <>
             <ChildA foo={foo} />
             <ChildB setFoo={setFoo} />
         </>
     )
}

const ChildA = ({ foo }) => <span> {foo} </span>

const ChildB = ({ setFoo }) => <button onClick={() => setFoo('bar')}> Change </button>

Upvotes: 2

user14361391
user14361391

Reputation:

You can create a state on the parent and pass the values to childB, pass the setState to childA. so when ever childA modifies that state, childB receives it automatically

Here you go, solution to get your props passed from childA to childB via parent

import React, { useEffect, useState } from "react";

const ChildA = ({ change }) => {
  const selectedRow = (row: any) => {
    console.log("schedule clicked", row); //Pass this to Parent and then EziTransaction 'ComponentB'
    change(row);
  };

  useEffect(() => {
    selectedRow("Test Data");
  }, []);

  return <></>;
};

const ChildB = ({ data }) => {
  return <div>I Recieved "{data}" from Parent</div>;
};

const Parent = () => {
  const [data, setData] = useState("");

  return (
    <div className="App">
      <h1>I am Parent</h1>

      <ChildA change={setData} />

      <ChildB data={data} />
    </div>
  );
};

export default Parent;

Upvotes: 1

Related Questions