Higher-order component (decorador)

Es una función A que toma un componente f y devuelve un nuevo componente g(x) = A(f(x)).

Utilizada para preparar o proveer datos a el árbol de componentes.

import * as axios from "axios";

const withAuthToken = (WrappedComponent) => {
	return (props) => {
		const token = localStorage.getItem("token");
		if (token) {
			axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
		}
		return <WrappedComponent {...props} />;
	};
};

export const App = withAuthToken((props) => {
	return <h1>App</h1>;
});