Implementing a Higher Order Component

Creating a container component

Assume we want to switch between a list and map view in a user interface. A container component will be in charge of gathering the data which is needed for the user and will pass them to the configurable layout component. As long as both components keep to the interface the developer has set up (think PropTypes), both components are easily interchangeable and can be tested and developed independently.

But enough of the theory. Let’s look at an example. We are going to load a list of the 10 biggest cryptocurrencies and their current price. To obtain the data from the Coingecko API, we create a higher order component that loads the data and passes it to the layout component: