How to pass data between sibling components in React
Tags: react, beginners, tutorial
Published: 2022-09-12 01:42:49



<p> To tackle the challenge of passing data between sibling components, we are going to be looking at how data is passed between components in React. We use components to perform various functions that our application needs to be able to run as intended. First, lets start by defining what a component is:<br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opixx9cw8qumep6ux66g.jpg"/>
<br>
For this example, we will be using function components. We'll start out with 4 components:<br>
a parent component named <code>App</code><br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug2dt06bhn5cvtvusprd.jpg"/>
<br>
A child of <code>App</code> named <code>Search</code><br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8gfxgl8s3fk9x3kel0s.jpg"/>
<br>
Another child of <code>App</code> named <code>Container</code><br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f52w56fta28noa77edr4.jpg"/>
<br>
And a child of <code>Container</code> named <code>Item</code><br>


!<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrgoc4cucuemidclu363.jpg"/>

<br>
Here is how the components are arranged in our tree:<br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3asaovjv04poky38lfd.jpg"/>

</p>
<h1>Parent to Child</h1>
<p>
One way to get components to start talking to each other is using props. A parent component can pass an argument down to a child component as a prop. An example of this can be seen between the <code>Container</code> component and the <code>Item</code> component. <code>Container</code> fetches a list of data and stores it in the variable <code>list</code>. The array of <code>list</code> is then iterated through using the <code>map()</code> method. Each list item is then passed to the <code>Item</code> component using the prop named <code>listItem</code>. <code>Item</code> then takes the data passed through the prop <code>listItem</code> and uses it to display the information it contains. This alone does not solve our challenge because only the child component that the prop is passed to has access to that prop and any other sibling components will not. If we want to use the <code>Search</code> component to perform a search on the list that is held in the <code>Container</code> component, we will have to find a way to get data between the two. Since the sibling components cannot talk to each other, we will need to use the parent component as a go between. 
</p>
<h1>Child to Parent</h1>
<p>
So a parent can send data to a child using a prop, but how can the child send data to the parent? A prop can also be used to send a function. If we use this feature to send a call back function to the child, we will then be able to use inverse data flow to get information back to the parent. To do this, we will set up new variable that uses State to update it.<br>
</p>
```
const [query, setQuery] = useState(');
```
<p>
<br>
We will then send <code>setQuery</code> to the <code>Search</code> component as a prop.<br>
</p>

```
<Search onQuery={setQuery} />
```
<p>
<br>
Here is what it looks like added to the <code>App</code> component:<br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnpl98mkwgh89laf9ywi.jpg"/>
<br>
Next we look at the <code>Search</code> component. We accept the prop and deconstruct it.<br>
</p>

```
function Search({ onQuery })
```

<p>
<br>
Now instead of simply doing a console log of the search entry, we can pass the search query back to the <code>App</code> component.<br>
</p>

```
onQuery(e.target.value);
```

<p>
<br>
Here is what it looks like added to the <code>Search</code> compenent:<br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djftewg5dyifouev7v20.jpg"/>
<br>
With the search query data now in the <code>App</code> component, we can simply pass that data down to the <code>Container</code> component as a prop.<br>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbf2e5pf2zyq9ry3j5la.jpg"/>
<br>
We have successfully passed data from sibling to sibling using the parent as a go between. The query data from the <code>Search</code> component is now available in the <code>Container</code> component and the query data can be used to do a search on the <code>list</code> array.
</p>