, // , document.getElementById("root") );"> , // , document.getElementById("root") );"> , // , document.getElementById("root") );">
function App(props) {
  return (
    <h1>
      ¡{props.saludo}, {props.nombre}!
    </h1>
  );
}

function withSaludo(WrappedComponent) {
  return function WrappedComponentWithSaludo(saludo) {
    return function ComponenteDeVerdad(props) {
      return (
        <React.Fragment>
          <WrappedComponent {...props} saludo={saludo} />
          <p>Estamos acompañando al WrapperComponent</p>
        </React.Fragment>
      );
    };
  };
}

const AppWithSaludo = withSaludo(App)("Ey");

ReactDOM.render(
  <AppWithSaludo nombre="Charles" />,
  // <App saludo="Buenas" nombre="Nath" />,
  document.getElementById("root")
);

Untitled


Archivos de la Clase

Creando tu primer HOC

https://github.com/FROSTYLAN/TodoApp/commit/6008d27e2bc326f879a18710aca84f128fc20ee1


Lecturas Recomendadas

curso-react-patrones-render.zip

Qué son los High Order Components

Notificando cambios con StorageEventListener