When developing in React you may come across a situation where you want to pass down a prop to a component, but then you have multiple components of the same type, and you pass the same prop to all of them.

This can be annoying, not only your code looks a bit ugly like this, it is against the DRY principles. (Don’t repeat yourself)

There are a dozen ways of dealing with this. And one of them is a container component. A container component is a component whose job is to host another set of components.

Note: there are many uses to container components this is just one of them.

What’ll do is to create a container component and that will accept this prop and then pass it along to its children.

The Container will clone the children with the added prop.

You can do much more with container component, things like counting, sorting, filtering and more but this will be in another blog post sometime in the future.