Passing Props In React

For some beginners passing data through components may be confusing. how can we pass data from child component to parent? what about parent component to child one? are there better ways to pass data? do we have libraries to make our work easier?

Well slow down. we will cover all of this subjects in this blog. so the first subject may be:

Moving Data From Child To Parent:

So think we have a file name Main in our src folder & we have two files name Parent & Child in there.

Here is my child component:

import React, { useState } from "react";

function Child() {
  const [data, setData] = useState("");

  const dataHandler = function () {
    setData("We are passing data from child to parent!");
  };

  return (
    <div className="container-c">
         <h3>{data}</h3>
      <button onClick={dataHandler}>Click</button>
    </div>
  );
}

export default Child;

So basically what we have is a button and a text that when we click the button data going to change, but that’s not all I want! I want to pass the data to parent component and check if the data correct. So how can I do that?

It’s simple. let explain like that. you have your children tag in parent component right?

import React from "react";
import Child from "./Child";

function Parent() {
  return (
    <div>
      <Child />
    </div>
  );
}

export default Parent;

First we should define an attribute. Why? because we send our data using props to this attribute and then pass through a function. let me show you what I mean:

  const dataHandler = function () {
    setData("We are passing data from child to parent!");
    props.getDataAtr(data);
  };

In the dataHnadler function that we had I get the props (you should call it from Child function first) & pass the data to the getDataAtr. so what is getDataAtr? it is that attribute that I was talking about. It get the data in parent component from Child tag so you can pass it to a sertain function.

 return (
    <div>
      <h1>{pData}</h1>
      <Child getDataAtr={(data) => atrHandler(data)} />
    </div>
  );

In Parent component I get the data from the getDataAtr and pass it to a sertain function(attribute name can be anything!). & this would be our function:

import React, { useState } from "react";
import Child from "./Child";

function Parent() {
  const [pData, setPdata] = useState();

  const atrHandler = function (data) {
    // console.log(data);
    setPdata(data);
  };

  return (
    <div>
      <h1>{pData}</h1>
      <Child getDataAtr={(data) => atrHandler(data)} />
    </div>
  );
}

export default Parent;

As you see im telling getDataAtr that get every thing that this tag is passing to you & send it as data to atrHandler. atrHandler will get the data and save it in our state name with it’s function name setPdata. then we show the state as a h1 element. so now if I click the button first my state in child element going to change then if click again it will pass the data to parent and then my h1 will show the text.

click once:

click twice:

Moving Data From Parent To Child:

What if we wanted to pass the data from high level component to lower one? well it’s kind of similar to each other. let me show you.

Now think that I have a number in my parent component & I want to pass it all the way down to it’s child. all I can do is again give an attribute to my child component and just put the data there. like this:

import React, { useState } from "react";
import Child from "./Child";

function Parent() {
  const number = 425;

  return (
    <div>
      <Child getData={number} />
    </div>
  );
}

export default Parent;

As you can see im passing my number(state) with getData attribute to my child tag. now I can get the data with my props & save it in my state. like this:

import React, { useState } from "react";

function Child(props) {
  const [data, setData] = useState(props.getData);

  return (
    <div className="container-c">
      <h3>{data}</h3>
    </div>
  );
}

export default Child;

As you can see I get the number with props.getData & saved it in my state as default value. now the number will be shown from the child tag not parent. like this:

Problems In Bigger Projects:

You may bigger projects than this one. think that if you had lots of components in each other. if you wanted to pass data from the lowest component and give to highest one god knows how many times you should do this loop of giving & getting. well of course we have better ways to pass data in this positions! but you should understand when you have to use props & when to use other ways.

what is other ways? you can use libraries to make your work easier. libraries like redux have store so you can pass data all over your project or something like Jotai that have it’s own hook that is very similar to useState hook. or you may use other libraries that is totally okay!

But now lets talk a little about these two libraries that I recommend.

Did You Say Redux?

Yes, Redux is a React library that we use it to save, update & pass our data through our components. this library can be really useful when it comes to big projects. Karnika Gupta have a simple blog about what is Redux that it can help you better to understand what is it. read here.

What Is Jotai?

As I said Jotai is a lot easier than Redux, it’s so much more developer friendly and using it is exactly like using react hooks. I have a blog about Jotai & using it that you can read from here.

thanks for reading. Any opinion? let me know in the comments.🙏❤