Pass data in React Components

Have you ever thought about how we can pass data from one component to another component in React? If not, then this blog is for you. I will explain to you how we can pass data from parent to Children Component, Children to Parent Component, and in between siblings.

Parent to Children

Data transfer between Parent to Child components follow top to down approach. If we need data from the parent component to the child component. Then we can pass data using props.

Let's take an example of how we can pass data from parent to child Component.

import { useState } from "react";

export default function Parent() {
  const [data, setdata] = useState("Hello");
  return (
    <>
      <Child data={data} />
    </>
  );
}

function Child(props) {
const {data} = props
  return (
    <>
      <h1>{data} Readers </h1>
    </>
  );
}

As you can see here, we have two components, one is the parent component and the other one is Child Component. The parent component is passing data using props to the child component. After destructuring props, we can access Parent data inside the child Component.

Children to Parent

React follows unidirectional data flow. We can pass data from parent to child using props. but if we want to pass data from the child component to the parent component then we have to follow three steps.

First, we need to define a callback function to handle data from children.
Pass callback function using props from parent component to child component.
Using props, the child component calls the callback function of the parent component with data.

Let's see how we can pass data from child to parent Component.

import { useState } from "react";

export default function Parent() {
  const [data, setData] = useState("");

  const getData = (event) => {
    setData(event);
  };
  return (
    <>
      <Child getData={getData} />
      <h1>{data}</h1>
    </>
  );
}

function Child({ getData }) {
  const name = "Readers";
  return (
    <>
      <button onClick={() => getData(name)}>GetData</button>
    </>
  );
}

As you can see in the example, we have a getData function inside the parent Component and we are passing it using props to the child Component. Inside the child component, we have a button, whenever the user clicks on the button, the getData function will call with data and will change the state of the Parent Component.

Between Siblings

Passing Data between siblings is quite similar to passing data from child to parent Component. First, we have to warp both siblings to the parent component. Using the Callback function we have to pass data from the first child component to the parent component. Now, we can pass data from the parent component to another child component through props.

Let's see how siblings components share data.

import { useState } from "react";

export default function Parent() {
  const [data, setData] = useState("");

  const getData = (event) => {
    setData(event);
  };
  return (
    <>
      <FirstChild getData={getData} />
      <SecondChild props={data} />
    </>
  );
}

function FirstChild({ getData }) {
  const name = "Readers";
  return (
    <>
      <button onClick={() => getData(name)}>Button</button>
    </>
  );
}

function SecondChild({ props }) {
  return (
    <>
      <h1>{props}</h1>
    </>
  );
}

In this example, we have one parent and two child components. Using the callback function we are passing FirstChild data to the parent component and then we are able to pass data from the parent to the SecondChild component using Props.

Conclusion

I hope you are now aware of how we can transfer data from one component to another component. You might be thinking about how we can transfer data from grandparent to child. I will explain in the next blog about prop drilling, UseContext, and useReducer.

Do share your feedback in the comments and help me to improve.

ThankYou.

How to pass data in React Components.

Parent to Children

Children to Parent

Between Siblings

Conclusion