higher order layout component example in React

app.jsx

import React from 'react';
import { render } from 'react-dom';
import {PageContent, PageSidebar} from './Content';
import Layout from './Layout';

const Example = Layout({Content: PageContent, Sidebar: PageSidebar});

render(Example, document.getElementById('app'))

content.jsx

import React from 'react';

class PageContent extends React.Component {
  constructor(props){
   super(props)
  }
  render() {
    return (
      <div>
        <h2>Content</h2>
        <p>Main content</p>
      </div>
    )
  }
}

PageContent.displayName = 'PageContent';

class PageSidebar extends React.Component {
  constructor(props){
   super(props)
  }
  render() {
    return (
      <div>
        <h2>Sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisici.</p>
      </div>
    )
  }
}

PageSidebar.displayName = 'PageSidebar';

export {PageContent, PageSidebar};

layout.jsx

import React from 'react'

function Layout(components) {
  const { Content, Sidebar } = components;

  class Component extends React.Component{
    constructor(props){
      super(props);
    }

    getSidebar(){
      if(!Sidebar){
        return null;
      }

      return (
        <div className="Sidebar">
          <Sidebar {...this.props} />
        </div>
      );
    }

    render() {
      // mock sidebar/content layout
      return (
        <div key="dashboard">
          {this.getSidebar()}
          <div className="Content">
            <Content {...this.props}/>
          </div>
        </div>
      );
    }
  }

  Component.propTypes = {
    route: React.PropTypes.object.isRequired,
  };

  Component.displayName = 'Layout';

  return Component;
}

export default Layout;