Display UI elements in different order

Use a prop to specify order – Map through ReactElements and render it based on order prop.

class PageSections extends Component {
  render() {
    const pageItems = this.props.contentOrder.map(
      (content) => {
        const renderFunc = this.contentOrderMap[content];
        return (typeof renderFunc === 'function') ? renderFunc() : null;
      }
    );

    return (
      <div className="page-content">
        {pageItems}
      </div>
    )
  }
}

Related links:

• Slides from my talk: Building Multi-tenant UI with React