Fake components and prop injection

During my attempts to push the boundaries of React.js, I came across two interesting concepts that I discoveried and can really enhance the quality and readability of your components, I will show what they mean and an example using them:

Prop injection

I actually already encountered people using this concept before, but they never properly named, it’s basically a component that inject props to it’s children. Let’s see the example:

Do you have any ideia how you would compose the List element to achieve what we are aiming at? First thing we need to do is loop the data we want to print, them bind it to the item.

But you may say, there are other ways we could do that, we didn’t need to cast the component a children to use it, well, in this PARTICULAR case, I really could do other ways, but this will be necessary for the next part, fake components:

Fake components

Just a heads up, we are going to lie to typescript, because it does not support this concept. Fake components are components passed as children, that are not actually rendered, isntead we strip their data and do other things with it instead.

For example, the following dashboard can have three screens, it strips the Menu component, creates a navbar, a router and the routes for it. But the menu component never really gets rendered. That’s how we would do it:

We filter only the components that are important to us, the first type in the child is relative to React data, the second one is the one that we defined in the last line of the image; We need to rely on a hardcoded string, because when building it into production, component names are changed, so we can’t rely on that. And as you can see, we didn’t use the component, but we got it’s data to build our application from.

There are other tons of ways of using those two together to build really simple but elegant components using JSX. Another example (that I will leave you to think how to implement that) is a table: