React —How to Deal with Parent and Child Components
When I first started learning about react, I was told that this was going to be much easier and smoother than Vanilla JavaScript. I was as excited as a high school graduate going into their first year of college (we all know how that is). I jumped right in thinking it was going to be as easy as div.append(image). Little did I know…
One of the concepts that I had a hard time wrapping my head around is the relationship between parent and children components. How do I pass props? Which component do I pass the prop into? Can I pass something from child to parent?
The first step in overcoming this challenge is simple: write/draw out a components workflow diagram like the one below (doesn’t need to be as fancy). Determine which component will be the Parent (and will pass down the information to the Child component) and which will be the Child (accepts the props from the Parent).
From Parent to Child
Let’s use the wireframe above to demonstrate how this works in Visual Studio code. In our App component we’ve created a variable called sortedProducts. If we want to use this variable in other components we can pass it down as a prop as shown below. On lines 18 and 19 we’ve passed down sortedProducts as a prop that can be used within the Header and MainContainer components. You can name these props anything (sortProds= {sortedProducts}, alpahbProdSort= {sortedProducts}, etc) as long as the name you give it makes sense to you and will make sense to whoever will also be using your code.
To access the variable in the specific components, you will need to pass it in as a prop and call the prop inside the component.
Once, you’ve passed it in, you can use it however you like and even pass it down to the parent’s grandchild if it has any.
Inverse Data Flow: From Child to Parent
One thing that I was skeptical about when I first started learning about it was passing props UP from child to parent. You must be thinking, “what, is this even legal?!”. I’m here to tell you that yes this is possible with the help of callback functions! Below are a couple of easy steps I followed to get this done:
- Start off by creating the function in the parent component
2. Send that function down to the child component as a prop
3. Invoke the function in the child component and send it back up as a prop to the parent component.
And there ya have it coders, you’ve hacked the system and found a way to pass a prop from child to parent. It’s as easy as 1, 2, 3. Once you’ve put in the lines of code and practiced it a couple of times, it’ll become much easier to implement.
Conclusion
I hope this helped you in creating a clearer picture of the relationship between parent components and child components and how to pass props between them. I’ve added a summary image below for review; it also includes how to pass info between siblings (done through the parent components) which is something you can look into after getting comfortable with parent-to-child and child-to-parent information flow!
