When we write react code, we frequently split it into different components for a variety of reasons. The reasons might include code reusability code readability, etc. And in some cases, we need to communicate (transfer data) between different components. Props are one way to transfer data between react components.

In React, we use props to pass data from one component to another, i.e. from a parent to a child component. Although we cannot pass props from child to parent, there are some workarounds that will be discussed in the blog.

Props data is immutable (read-only)

In this example, the parent component MainList contains the child component ListItem. We will look at how can we pass data as props from parent to child component:

Starter example code

This is our parent component:

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

const MainList = () => {
  return (
    <>
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
    </>
  );
};

export default MainList;

This is our child component:

import React from "react";

const ListItem = () => {
  return <p>ListItem Content</p>;
};

export default ListItem;

This is what our starter project looks like:

Passing props in parent component:

Lets pass props from parent component to show dynamic content in each list item.

This is how we pass props from parent component:

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

const MainList = () => {
  return (
    <>
      <ListItem text="First list item" />
      <ListItem text="Second list item" />
      <ListItem text="Third list item" />
      <ListItem text="Fourth list item" />
    </>
  );
};

export default MainList;

Let's give the child component ListItem a "text" attribute and then give it a string value.

Accepting props in child component.

Now that we've passed the prop from the parent component, we must accept it in the child component. We may accept props in a child component in a variety of ways. For this example, we will adhere to a simple method of receiving the prop, but we shall see alternative methods in subsequent sections of the blog.

This is how we accept props in child component:

import React from "react";

const ListItem = (props) => {
  return <p>{props.text}</p>;
};

export default ListItem;

Props return back an object. In JavaScript, we can access object elements with dot(.) notation. In the above example, we render our text property with an interpolation.

And the output we get is:

Data cannot be passed up from a child to a parent component — at least not directly. But we have a workaround. We can pass functions as props.

A function in the parent component can be passed to the child via props. The function in the child component can then be executed to change data in the parent component. We can make the change dynamic by passing an argument while the function in the child component is being executed. Lets see how it works.

Starter example code.

This is our parent component:

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

const MainList = () => {
  const [text, setText] = useState("Initial text");

  const changeText = () => {
    setText("Changed text");
  };

  return (
    <>
      <ListItem text={text} />
      <ListItem text={text} />
      <ListItem text={text} />
      <ListItem text={text} />
    </>
  );
};

export default MainList;

Here we have a state text which has a initial value of “Initial text”. The parent MainList is sending the text prop, which has the value of text state to the child component ListItem. (We have already seen how to pass props from parent to child component above in this blog above ). We also have a function changeText which changes the value of state from “Initial text” to “Changed text”.

This is our child component:

import React from "react";

const ListItem = (props) => {
  return <p>{props.text}</p>;
};

export default ListItem;

Here we are simply accepting props that we passed from the parent component above and displaying it.

This is how the project looks at the moment.

Passing function as props from the Parent Component.

Now lets pass changeText function as prop to the child component ListItem. Its same as passing any other props.

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

const MainList = () => {
  const [text, setText] = useState("Initail text");

  const changeText = () => {
    setText("Changed text");
  };

  return (
    <>
      <ListItem text={text} setText={changeText} />
      <ListItem text={text} />
      <ListItem text={text} />
      <ListItem text={text} />
    </>
  );
};

export default MainList;

In the example above, the MainListcomponent is sending the setText prop, which has the changeText function to change the state into the text to “Changed text”.

Accepting function as prop in the child component

Now that we sent the setText prop from the parent, lets accept the prop in the child component and execute it to see the changes.

import React from "react";

const ListItem = (props) => {
  return <p onClick={props.setText}>{props.text}</p>;
};

export default ListItem;

Now in the child component ListItem we have a onClick function on the paragraph tag which contains the setText prop that we are receiving from the parent component. So when we click on the paragraph tag it will execute the setText prop which contains changeText function and the text state will be changed to “Changed text”.

And there you have it, we just made a change in the parent from the child component. This explains what occurred here. When we click on the first paragraph tag (since we only passed the setText prop to the first paragraph tag from the parent component to the child component), the onClick fires the setText fucnction that we are accepting as prop. And in the parent component, the setText method contains the changeText function. As a result, the changeText function is called, and the text state's value is changed to "Changed text."

But we are not actually sending any data from the child component to the parent. We just did some action in the child component which caused some change in the parent component. The change was not dynamic.

We can do that by accepting arguments in the changeText function and passing parameters in the function when we execute the function in the child component.

Accepting argument in the function

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

const MainList = () => {
  const [text, setText] = useState("Initail text");

  const changeText = (variableText) => {
    setText(variableText);
  };

  return (
    <>
      <ListItem text={text} setText={changeText} />
      <ListItem text={text} />
      <ListItem text={text} />
      <ListItem text={text} />
    </>
  );
};

export default MainList;

Here we are accepting variableText argument in the changeText function and setting the text state as the value of the variableText argument.

The way of sending the function to the child component remains the same as we discussed in the blog above.

Passing parameters while executing the function in the child component

import React from "react";

const ListItem = (props) => {
  return (
    <p onClick={() => props.setText("Changed text using parameters")}>
      {props.text}
    </p>
  );
};

export default ListItem;

Now when we click on the paragraph tag the text will get changed to whatever text we are passing as the argument in the function.

This is how we pass data from child component to the parent component dynamically.

In react, we may pass and accept props in a variety of methods. And the current JavaScript ES6 gives us with several useful capabilities that can prevent us from writing those extra lines of code. Here are some additional points on props.

Passing Props Dynamically

To return to the example, if we had an array of text to provide to the child component ListItem, manually typing out ListItem and passing text prop each time isn’t very clean code. Instead, we may traverse an array of all texts and send a variable representing the text as a prop to each child component. This is much simpler code, and we can use curly brackets to send a dynamic text prop into the 'ListItem' component. This is done as follows:

const MainList = () => {
  texts = ["text1", "text2", "text3", "text4"];

  return (
    <>
      texts.map(text => <ListItem text={text} /> )
    </>
  );
};

Destructuring Props

If we have several props to pass in the child component. We can pass it like this:

const MainList = () => {
  return (
    <>
      <ListItem
        text={text}
        title="Not so good way of passing props"
        date="21/6/2022"
        author="OurWeb"
      />
    </>
  );
};

However, this is not a clean approach to write code. Instead, we may provide the props as an object to the child component and destructure it. Props can be destructured in a variety of ways. Let's have a look at some of them:

Destructuring Inside Component Function Definition

We may destructure it straight where the props argument would typically be sent in by giving an object containing the variable names.

const ListItem = ({ text, title, date, author }) => {
  return (
    <div>
      Text = {text}
      Title = {title}
      Date = {date}
      Author = {author}
    </div>
  );
};

Destructuring Inside Component

const ListItem = (props) => {
  //Destructuring
  const { text, title, date, author } = props;

  return (
    <div>
      Text = {text}
      Title = {title}
      Date = {date}
      Author = {author}
    </div>
  );
};

Giving Default Values to Props

There may be situations when the props we're destructuring no longer exist and their value is undefined. This might leed to errors in your code. So, we can leverage Destructuring's default behaviour by assigning default values to the props that we are destructuring. This is how it is done:

const ListItem = ({ text, author = "Annonymous" }) => {
  return (
    <div>
      Text = {text}
      Author = {author}
    </div>
  );
};

The author will be set to "Annonymous" by default if its value is undefined.

Useing shorthand for boolean props

There are times when we pass boolean props to a component. As a result, we frequently do it like this:

const MainList = () => {
  return (
    <>
      <ListItem isVisible={true} isAuthor={true} />
    </>
  );
};

However, this is not the finest method to go about it. The particular instance of a prop is truthy by default if the prop is passed or false if the prop is absent. As a result, the above code may be written as follows:

const MainList = () => {
  return (
    <>
      <ListItem isVisible isAuthor />
    </>
  );
};

Okay, so that was all about passing props between components. We learned how to pass props from parent to child and from child to parent components. Finally, we looked at some best practices for react props. However, this is not even close to what react has to offer in terms of features. There are several methods to do stuff with React. You might want to have a peek at the react official docs on props. But what we learned in this blog should be more than enough to get you started. Continue coding and passing props. Until next time, take care.