How to pass data from a parent to a child component & vice versa

React is a component-based library by nature. Given that, you need a way to communicate with all your components.

In this lesson, we’ll be learning the two ways to communicate within React components:

• downward, i.e., from a parent component to a child component
• upward

Downward communication

Downward communication is the communication between a parent and a child component done by the so-called props, which are a kind of “user input.”

Let’s see it in practice:

I’ve created two components, App (the parent) and Mentors (the child). The Mentors component depends upon the App component for the list of mentors.

This is how the parent passes its private variable to the child:

<Mentors list={profiles} />

This is how the child makes use of it:

props.list.map()

Upward communication

So far we’ve seen how the parent passes data to the child, but how can the child send data back?

Let’s create a new Search component:

const Search = props => {
  const [searchTerm, setSearchTerm] = useState();

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" onChange={handleChange} />
      <p>
        Searching for: <strong>{searchTerm}</strong>.
      </p>
    </div>
  );
};

We have created a simple input form and displayed the user input just below.

Now you can use it in the App component, just above the Mentors component.

<Search />

It’s just working fine, but there’s still no communication between this child and the parent. Let’s say we would like, for instance, to console.log() user input in the parent component.

Let’s create a handler function in the App component:

  const handleSearch = event => console.log(event.target.value);

Edit the Search tag so that it uses this handler function:

<Search onSearch={handleSearch} />

Go to the Search component and use the OnSearch props like so:

props.onSearch(event);

Finally, we put it all together:

Upon opening your devtools, you can see that you can access the input data from the child component to the parent component.

Note: handleSearch is called a callback function/handler.

Closing notes

In this lesson, we learned how to pass data from a parent component to a child component and vice-versa. For the first case, we did it thanks to the props. In the last case, we took the help of a callback handler.

Thank you for learning with me.