Wrapper (Layout) Component, Parent Child Components in React

Let’s design a layout component in React. Have you used props.children in react? props.children make use of React.Children API. You can use props.children in components that represent ‘generic boxes’ which don’t know their children ahead of time. Good example for that are Sidebar components or Dialog box components.

By dialog box I mean modals or pop ups. Another example is the App component when you wrap it inside other components. This is not a HOC. Means its not a Higher Order Component but it is kind a like that. It does not take anything from the child. It only gives something to child or passes down values or data to child components that child components can use. Whereas a HOC takes a component or function, modifies it and returns another new function. But this is not HOC. This is wrapper component. A parent component. So if you want a parent component that doesn’t know its children right now, you can use props.children in parent component. Then you warp the parent component around child component. Also I am not talking about the Context API here. Context is a different subject.

Consider the site layout or wrapper. Layout contains the sidebar, header and footer components. And then content is inside. Consider content as the {props.children} that can be changed conditionally but the sidebar, header and footer being part of layout wrapper component remain same through out all pages of site.