How to Use Higher-Order Components in React

In JavaScript, we have higher-order functions (HOC), which are basically functions that accept functions. In React, higher-order components are basically functions which accept component as parameters, inject or modify their props, and return a modified component.
Real world use case: Suppose you have a button that you want to be rendered with two different styles. Using the main ideas behind HOC we do not need to create two buttons with different styles, but, rather, create a single button component and pass it through a wrapper function that modifies its props or styles and returns a new component.