Pass Prop & Drop It…..(How to pass state as props)

When I first began working with React as a front-end I had trouble figuring out how to pass objects or “results” from a child back to parent component. I’m here to show just how easy it actually is, and I hope it makes your life a lot easier like it did for me. I’ll also show how to pass state from the parent component down to the child component.

This is the top component. It is a stateless functional component
This is the child component of App and parent component of Child..It is a class function that can handle state
This is the child component of Parent. It is a stateless functional component

The DOM tree would look as such:

App > Parent > Child

This is what the browser displays so far. The top line is from the App component, the middle line is from the Parent component, and the last line is from the Child component

The first thing I will show is how to use a state variable in an html element, and then how to pass a state variable from the Parent to Child

“Bob” can be accessed by calling…Because I’m using JS in an HTML element, I must use {brackets} around the code.
Bob is now printed in the second line
I’m going to pass down to Child, and I will be able to reference this object by calling the variable name to the left of the operator….in this case “parentsName”
I can access the variable being passed down by adding props in the parameter of the component, and then by calling it by props.parentsName..This is the same name we named it above. It is important these match. I like to think of the variable is this way…If I’m trying to access it inside the class I declared it then Im going to use “this” or “this.state” to refer to it..If Im accessing a variable being passed down I will have to use “props” instead.
Now both components share the same name and variable.

We can also change the name in the current state on Parent, and it will reflect on both sides.

The only thing I changed was the name in state..I didn’t touch the Child component at all.
As you can see it altered the name for both the Parent and the Child

Now we know how to pass state as “props” down the children components…But how do we pass something back to the parent?

Here in Parent I added a handle function for the click event created in Child(You will see in the next image)..All this function does at the moment is print our “event” in the browser console. For Child to access this function, I’ll pass it down like with parentsName inside the Child component tag.The left side of the equal sign is how we refer to this function in Child, and the right side is how we want to handle the event..
The only things added in Child were const newName, and the onClick event in the h1 html tag. By using arrow functions in the onClick event we can pass objects back to the parent in the parameters of our callback method.
Now if we click the last line..
Randy will be printed in the console..and you can see on the right this line of code is being printed from Parent

Now how about we change the state variable name in Parent by clicking in the Child component..

All I did was change console.log() to this.setState()…This allows us to make updates to the current state. As of now event is returning “Randy”, so this should set name in Parent to “Randy”
After I clicked the third line, both names changed to “Randy”!!

Not so bad right!? I hope ya’’ll enjoyed my article..Once you understand the difference between props and state, and how to utilize both working with React apps can be a lot of fun!