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.
The DOM tree would look as such:
App > Parent > Child
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
We can also change the name in the current state on Parent, and it will reflect on both sides.
Now we know how to pass state as “props” down the children components…But how do we pass something back to the parent?
Now how about we change the state variable name in Parent by clicking in the Child component..
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!