MENU


Container Components

You can think of HOCs as parameterized container component definitions.

Here's a concise definition of the container component pattern:

Container components are primarily concerned with how things work.

They rarely have any HTML markup of their own, aside from a wrapping <div>;

They are often stateful.

They are responsible for providing data and behavior to their children (usually presentational components).

This illustrates how a container component performs two functions, presenting the UI and handling the logic of the component.
RESETRUNFULL
const X = props => {
   return (<MyContainerComponent>Hello World!</MyContainerComponent>);}const MyContainerComponent = ({ children }) => {
   const open = () => {
      alert("You clicked this container component")
   }
   return (<div onClick={open}>
                {children}
             </div>);};ReactDOM.render(<X/>,document.querySelector("div"));

Developers tend to place their container components in a separate folder and the UI components into another folder, so they can distinguish between these components.

Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state, and pass props to components that handle things like rendering UI.