The more I develop with React the more I learn about creating truly dynamic outputs and making components reusable in many different situations. Doing this requires more and more React knowledge and a real dedication to design when thinking about refactoring a component.
As components start to get too large they give off a bad ‘code smell’ and beg for refactoring. Shrinking and separating these can help make the app easier to understand and these smaller components can often be reused in other places in the application if designed right,
While trying to improve an application I ran into a situation where my component didn’t know its children ahead of time. The component was essentially a container for holding other elements.
Using the children prop allows other components to pass arbitrary children to them by nesting the JSX.
The ReactJS docs use an example of a custom border. By rendering the children prop in the Border component you can then pass children to the border by nesting them directly inside the JSX of another component.
Anything inside of the
FancyBorder component JSX tag gets passed to the Border component as a children prop. If we render the
props.children inside a
<div> we will see everything nested in the
FancyBorder component’s final output.
After learning about
props.children and starting to implement it to solve problems I understood where it could be used to allow for more refactor and increase the ability to reuse simple UI components.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React…
MisterRK - Overview
Hi I'm Robert, a software engineer with a former life managing Michelin starred restaurants. I made the transition to…