Higher Order Components

Higher order components are components that:

• render children components
• allow ‘render hijacking’ of children components (i.e. control rendering of children components)
• allow manipulation of props before being passed to children components

A simple example that displays Info component with boilerplate warning message:

import React from 'react';
import ReactDOM from 'react-dom';

// Child component
const Info = (props) => (
  <div>
    <h1>Info Page</h1>
    <p>Info: {props.info}</p>
  </div>
)

// Wrapper function that encapsulates children components
const withAdminWarning = (WrappedComponent) => {
  return (props) => (
    <div>
      <p>These are private info. Please do not share</p>
      <WrappedComponent {...props} />
    </div>
  )
}

// Create higher order component by calling wrapper function
const AdminInfo = withAdminWarning(Info);

ReactDOM.render(<AdminInfo info="Secret data here" />, document.getElementById('root'));

Same example with render hijacking. Warning message and child component are rendered only when isAdmin = true:

const Info = (props) => (
  <div>
    <h1>Info Page</h1>
    <p>Info: {props.info}</p>
  </div>
)

const withAdminWarning = (WrappedComponent) => {
  return (props) => (
    <div>
      { props.isAdmin && <p>These are private info. Please do not share</p> }
      { props.isAdmin ? (
        <WrappedComponent {...props} />
      ) : (
          <p>Forbidden</p>
        ) }
    </div>
  )
}

const AdminInfo = withAdminWarning(Info);

ReactDOM.render(<AdminInfo isAdmin={false} info="Secret data here" />, document.getElementById('root'));

Posted on: Sun, 14 Apr 2019 04:01:45 GMT

Tags:

javascript

reactjs