How to pass props to child components in React.js using react-data-bouncer
This story starts with an ambitious developer trying to make his own app using React.
If you are familiar with React, you certainly have met the infamous error “cannot read property ‘x’ of undefined”. This error usually occurs, if not by a silly typo, when you are passing down a prop to a child component and using that prop during the mounting or rendering of said child. Unfortunately, you find that the particular prop is still undefined in the parent component when the child tries to access it. Then, to work around this silly interaction, you add a simple check whenever you come across that variable, like this
Or even worse
A few iterations later, your code is full of checks and barely readable because you keep passing down props from a parent into a child while setting that prop’s value in the parent during mount. And the more complex the data, the weirder things become.
Well, this is me all the time.
Before going ahead and trying to code something to work around this, it’s important to know why this happens. The reason why you cannot access variables updated or defined in a componentDidMount (or any mounting hook) of a certain component in its children, at the time of the first rendering, is that a parent component will only mount after all his children have mounted. In other words, if you want to update or define something in the componentDidMount of a component and then pass it down, you would need to block the children from being rendered.
This is even more troubling when you want to use that variable being passed down in other mounting hooks.
Tired of having to deal with this interaction, I decided to apply my efforts in coming up with a simple, durable, and reusable solution to this problem.
So I created ‘react-data-bouncer’.
The concept is this: I want to be able to define a variable in a component and be able to pass it down to any child and not worry about it being undefined. To accomplish it, I created a component that basically wraps around other components, and lets it’s parent mount before it’s children.
To understand how powerful this is, imagine not having to set crazy checks and function calls to use a variable coming from higher up the tree. You can basically have your desired state at the time of the first rendering and use your mounting hooks as the only thing being called to accomplish it.
How to use it?
npm install react-data-bouncer ----------------import Bouncer from 'react-data-bouncer'
Then, when wanting to “bounce” a component from rendering, you wrap it with our Bouncer component.
But wait, there’s more!
If you are more of a React Hooks type of person, you might be wondering, this doesn’t help me, because I don’t use class components, therefore componentDidMount is not an option. Well, the Bouncer component is also able to receive functions as props and call them before its children are mounted.
Like this:
What if I want to call functions with arguments?
Pass another property with an array containing your desired arguments.
The prop name should be “function name” + “Args”.
That’s it. Say goodbye to ternaries!
I hope you found this article helpful! I really did struggle to find a workaround to the order of rendering in React. I would always have a “tree type” of structure in my apps where the “roots” would be responsible for calling certain functions and defining important variables. And those “roots” would often need to use content from higher up the tree.
Having to add checks everywhere seemed like something that shouldn’t be needed. As if I was doing something wrong in my component architecture and that was a consequence of my lack of understanding of React. It turns out it definitely works like that, and parent components are expected to be mounting after their children due to the order that the code is read.
I know it’s a simple solution, but I have been using it in my later projects, and it’s proving to be super effective. I expect you will find that as well if you choose to start using it.
Feel free to send me feedback on my LinkedIn page: https://www.linkedin.com/in/rodrigo-jappur-mallmann-29a180193/
Happy coding!
