We discussed higher-order components in Chapter 5, Routing with React, with the discussion of withRouter
from React Router; now, we will build one, but first, let's take a quick refresher.
Higher-order components are a fantastically useful pattern in React. If you learn to use them well, you'll open up a whole bunch of possibilities to keep a large code base maintainable and reusable, but they’re not as intuitive as regular components, so let's ensure that we cover them well.
At a most basic level, a higher-order component is a function that returns a component.
Imagine that we have a button
component:
function Button(props) { return <button color={props.color}>Hello</button> }
This can also be written using class
syntax, if you're more familiar with that:
class Button extends Component { render() { return <button color={this.props.color}>Hello</button> } }
We use a color prop to control the color of the text. Let's say we use this button all...