Progressive Web Apps with React

Detour - higher order components

In the preceding code, we used the withRouter function (imported from react-router-dom) to give our App component access to the history prop. Let's take a moment to talk about how that worked, since it's one of the most powerful React patterns you can learn.

withRouter is an example of a Higher Order Component (HOC). This slightly grandiose name is better than my favorite explanation: Functions That Build Functions (thanks to Tom Coleman for that one). Let's see an example.

Let's say that you had a Button component, as follows:

const Button = (props) => {  return (    <button style={props.style}>{props.text}</button>  );};

Also, let's say that we had a situation where we wanted it to have white text and a red background: ...