public/components/utils/SectionSelect.react.js

import React from 'react';

export default class SectionSelect extends React.Component {

  constructor(props) {
    super(props);
  }

  render () {

    if (!this.props.sections || !this.props.sections.length) {
      return (
        <select disabled="true">
          <option>Fetching section names...</option>
        </select>
      );
    }

    const sections = this.props.isMicrosite ? this.props.sections.filter(sec => sec.isMicrosite === true) : this.props.sections.filter(sec => sec.isMicrosite === false);

    return (
      <select value={this.props.selectedId || false} onChange={this.props.onChange} disabled={this.props.disabled}>
        {!this.props.selectedId || this.props.showBlank ? <option value={false}></option> : false}
        {sections.sort((a, b) => {return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1;}).map((s) => {
          const value = this.props.usePath ? s.path : s.id;
          return (
            <option value={value} key={value} >{s.name}</option>
          );
        })}
      </select>
    );
  }
}