When developing in react we've all had the issue of the errant or misplaced prop. It can be hard to figure out exactly where you want to make a fetch, post to the server, or even just initialize a specific state. My general advice to solving the issue of not having access to a prop in the component you want it in is to start by drawing a component hierarchy to visualize your tree of components. While this is very important it can be quite the challenge for more extensive apps, especially if your like me and only made a visual representation of your components after getting lost.
As you can see above getting from A to B could be an absolute nightmare if you weren’t prepared. This is why you always want to draw out a component hierarchy at the onset of your project not in the middle after writing some code.
My second nugget of wisdom is this: It's possible to pass it up, it's best to pass it down, side to side will leave you with a frown. You might not be on the best terms with your siblings but in react siblings have a no contact order, you simply can't get information from on sibling component to another without going through mom or dad first. In general you want to put your prop in the lowest component that still has access to pass it down to all components that will need the prop.
Top comments (0)