Exchanging data between React components

A Component is one of the core building blocks of React. A React component takes an optional input and returns a React element which is rendered on the screen. How the data is passed between the components will depend on their hierarchy, or Parent/ Child/ Sibling relationship.

1. Passing data from the Parent component to a Child Component

The most straightforward way to pass data between components is to pass it from a parent to a child, which is be done by using props. React allows you to pass props but only in one direction, parent to a child, and not the other way around. In the example I have below, we are passing a prop with a name of faveSnack that is equal to a value of a string (in our case, of course, “pizza”). Passing a prop gives us access to the information in our Child component. To access the prop in our Child component we use props.faveSnack.

We could also just use our prop faveSnack directly, through something that’s called destructuring props. This is what it would look like:

2. Passing data from a Child component to a Parent component.

Here is where things are starting to get tricky, because - as you now know – we cannot pass props from a child to a parent. What we can do however is use callback functions. When we use a callback function in a Child component it can then make changes to a Parent component.

Let’s review the steps:

1. In the parent component, create a callback function. This callback function will retrieve the data from the child component.
2. Pass the callback function to the child as a props from the parent component.
3. The child component calls the parent callback function using props and passes the data to the parent component.

In the example below, we are using the callback function to handle the onChange event in the child component and pass the value from the input element as an argument to the callback function passed down as a prop, which is called snackHandler here. The function handleSnackChange takes an argument – an event, and passes the current value to the snack state variable. The event handler, while it is defined in the Parent component (or owned by it), is passed to the Child component as a prop and then called in that same Child component (or invoked by it).

3. Passing data between 2 Child components, or siblings.

In order to pass data between siblings, there are several methods we can choose from:

• Combination of the above two methods (callback and use of props).
• Using Redux.
• ContextAPI

For this post, I will focus on the first method in the spirit of establishing the communication channel between components using just React.

There is no direct way to pass the data between two (or more) children components; we need to use the Parent as a way to connect the siblings. The easiest way to think about it would mean combining the first two ways of passing data between the components that we just went over above.

First, we would need to define a callback function in a Parent component (which will own the callback function) and then send it to Child 1 as a prop. We are setting a state variable “snack” and updating its value using the callback function from Child 1, the way we did it above in the example of passing data from a Child to a Parent. The onChange event in Child1 component is being handled by the callback function handleSnackChange which is passed to Child1 as snackHandler prop from a Parent component. The value from Child1 input element is passed as an argument to the callback function handleSnackChange which in turn passes the current value to the snack state variable.

So far, the steps have been identical to the ones described in passing data from Child to Parent, since, as we established already, the parent must act as the intermediary between the siblings. Now that we passed the data from Child1 to the parent (as an argument in a callback function), we are setting it in a state in Parent component, then passing it as a prop to Child2:

To sum up, we can pass data from a Parent to a Child component using props, from a Child to a Parent using a callback function, and between the siblings using a combination of both.

Thank you for reading!