Composition in React

React has a powerful composition model so that unlike inheritance where the one component extends another component, we can use a parent-child relationship between components.

This is useful in cases where some components don’t know their children ahead of time.

Let's say we want to create a counter component with a common header.

Here, FancyHeader is acting as container component which can take any other component as a children prop.The Counter component is only concerned with the functionality.

Composition also works with class based component.