React: Passing Data between Components
Tags: react, javascript
Published: 2020-03-30 15:51:18

**React Overview**

React is a JavaScript library for building user interfaces (UI). What makes react so popular for developers is its ability to build UI's more easily and manageable. React uses a syntax called JSX to describe how the UI will look.
instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript. react needs a trans compiler called babel to bridge the gap between the languages to something the computer understands.

**State/Props**

React manages its data through a state. State is a JavaScript object whose values are mutable. State can only be used inside of the parent component so if we wanted access to the state data in other components, we will need props. Props like state is also a JavaScript object but values are immutable. the props are what other components will use to have access to the data within the state. and props is how we will pass data from a parent component to a child component.


**Passing data from a Parent to a Child**

To pass data from a parent component to a child component we will need access to the state data outside of the state. so, for this we will use props. let's see an example.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wtgsulv19h3y47z08dio.png)
                                                 here we declare child one and give it values equal to {this.props.value} 

child 1
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2kv2c1vlhg93z78bo7rw.png)

**Passing data from a child to a parent**

                 **Let’s add a second component**

**new parent** 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q2vtu0pcmrwkqkx98sdl.png)
                                            We added child two as a div and gave 
                                            it props from the state

**child2**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oykaxym2psb3ro1ywc8b.png)

In this new component we want to change the value of my prop, but as stated earlier, props are immutable so to change the value of my prop we need a way to change the value in the state. The easiest way to do that is to add a function in the component to manipulate the state in the parent component. to do this we added a method that onclick will trigger the change of state int he parent component so we can have a new value to color. let’s see how the second component and new parent component will look

Component 2 with added function
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jbhsy030y0ocjvw7ipry.png)
                                          here you can see we bind the function 
                                          to the scope we want.

**New parent function**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vwdpvz47d3bsisz2my0a.png)
                                         In the parent function we added a 
                                     function to the state that will be triggered

**The ladder**

Passing data from a child to a parent is fine when there is one child component. When there is more than one, we have to make sure the data is also passed to those components from the siblings. We have an order in which we change the parent component. we can’t just jump from component 3 to the parent while skipping pass component 2Lets add the new prop to component one so that it can take in the new value of the state also.

**Child 1**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lhg7ntkj3qccgecm0si1.png)


**Conclusion**

It’s easy to pass props from a parent to a child but to pass values from a child to a parent is a little extra, we must create a function. We must create a function in the component that will trigger a change to the state. then create that function in the parent component's state. It is also very easy for us to get to pass data between siblings to make sure they get the same interactions