Higher Order Component (HOC) example with React

hoc.js

// Higher Order Component (HOC) : A component that renders another component
// Goal: Reduce code, render hijacking, prop manipulation, abstract state
// Inspired by mead.io videos on Udemy

import React from 'react'
import reactDOM from 'react-dom'

const info = (props) => (
  <div>
    <h1>Hello { props.isAdmin ? 'admin' : 'guest' }</h1>
    <p>Info: { props.info }</p>
  </div>
)

const withWelcomeMessage = (WrappedComponent) => {
  return (props) => (
    <div>
      { props.isAdmin && <p>This is private info, please do not share!</p> }
      <WrappedComponent { ...props } />
    </div>
  )
}

const UserInfo = withWelcomeMessage(info)

reactDOM.render(<UserInfo isAdmin={true} info="info detailes passed" />, document.getElementById('app'))