Inverse Data Flow - The React Way
Tags: react
Published: 2022-06-15 13:21:00

Are you stuck in React trying to get data i.e props/properties from a child component to a parent component? Or trying to share data between sibling components? Worry not, because this is where React **Inverse Data Flow** comes in. 

Inverse data flow is the ability of React to send data from a child component to the parent component through a function, which in turn can be accessible to sibling components. There are a variety of methods that can be used to achieve the same in React, for example [useContext hook](https://dmitripavlutin.com/react-context-and-usecontext/). However if your web application is not a complex e-commerce website or something similar, you are in the right place.

**A. Creating React Application**

Let's create a simple React app to demonstrate this. Assuming you have npm installed, we use [npx create-react-app app-name](https://reactjs.org/docs/create-a-new-react-app.html) to generate a React application. If you don't have npm installed you can [click here](https://kinsta.com/blog/how-to-install-node-js/) for the installation procedure.

Next, we create a _components_ folder inside the _src_ folder that will hold our parent and sibling components. The images below show our folder structure.


![Creating react app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7qg1b82zky7ketvfma4.png) 


![Components structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu20g24rq8ab25lhjz6p.png)

![Output of first render](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ull33vcji4w9qle612dj.png)

When we run our application we get an output similar to the image above.

**B. Setting State**

[useState ](https://reactjs.org/docs/hooks-state.html) hook which we import in the _ParentComponent_ helps in managing the state of a component. We use the variables defined with useState to create a function _getSiblingData_ that will be responsible for getting data inversely from the child to parent component. See image below:


![Setting state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9o6wplyjyff6iiad2lf.png)

**B. Getting Data from Child To Parent Component**

```
<SiblingBrother usernameData={username} dataFromHere={getSiblingData} />
```

We first destructure the props that we passed in the _SiblingBrother_ component (reference above), then create an _input_ text field that will get the user input. We now assign a value to the input field from the props and pass an _onChange_ function that will send the data back to our _ParentComponent_. See the image below:


![Data from child component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2pulqhsfxdrj7g8ezkt.png)

**C. Finally...**

With everything in place, what remains is to pass the _username_ variable that we have defined to the _SiblingSister_ component and then render it for output. 

In the _ParentComponent_ image above (second image from top), there is a similar code like the one below:

```
<SiblingSister username={username} />
```
The _username_ props is being passed with username data from _SiblingBrother_ to _ParentComponent_ to _SiblingSister_.


![Final bit of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f512dlfb34lcgjz981al.png)

Now when any data is being keyed into the input field, React updates the state and this information is then passed to the _SiblingSister_ component.


![Final output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ees60xytqyhs5cdsqv9s.png)

The output should be as seen above. 

Congratulations on using inverse data flow with React.