HOCs demystified

by jonahe

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="root"></div>

Babel + JSX

const Content = ({children}) => 
	children ? <div>{ children }</div> : <div>No children provided</div>

const colorFontHOC = color => {
	return (props) => 
      <div style={ { color: color } }>
        <Content {...props}>{}</Content>
      </div>
};

const App = () => {
	const GreenContent = colorFontHOC('green');
  const RedContent = colorFontHOC('red');
  return (
  	<div>
      <Content>
        <span>Hello, world!</span>
      </Content>
      <GreenContent>
        <span>Hello, world!</span>
      </GreenContent>
      <RedContent>
        <span>Hello, world!</span>
      </RedContent>
      {
      	[
        	React.createElement( colorFontHOC('orange'), { key: "1" }, <span>Goodbye, world!</span> ),
        	React.createElement( colorFontHOC('teal'), { key: "2" }, <span>Goodbye, world!</span> ),
        	React.createElement( colorFontHOC('pink'), { key: "3" }, <span>Goodbye, world!</span> ),
        ]
      }
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));