ReactJS Dropdown Menu with optgroup

DropdownMenu.jsx

import React from 'react';

var SelectInput = React.createClass({

  propTypes: {
    groupBy: React.PropTypes.string,
    options: React.PropTypes.array.isRequired,
    placeholder: React.PropTypes.string,
    selected: React.PropTypes.string
  },

  getDefaultProps: function() {
    return {
      options: [],
      groupBy: null,
      selected: null
    };
  },

  getOptionTag: function(option) {
    return (
      <option value={option.id} key={option.id}>{option.name}</option>
    );
  },

  getOptionTags: function(options) {
    return options.map((option) => {
      return this.getOptionTag(option);
    });
  },

  getOptions: function() {
    var options = this.props.options;
    if (this.props.groupBy) {
      return this.getOptgroupTags(options);
    } else {
      return this.getOptionTags(options);
    }
  },

  getOptgroupTags: function(groups) {
    var optgroups = groups.map((group) => {
      var children = this.getOptionTags(group[this.props.groupBy]);
      return (
        <optgroup key={group.id} label={group.name}>
          {children}
        </optgroup>
      );
    });

    return optgroups;
  },

  render: function() {
    var options = this.getOptions();

    return (
      <select defaultValue={this.props.selected} {...this.props}>
        <option>{this.props.placeholder}</option>
        {options}
      </select>
    );
  }
});

export default SelectInput;

How to use

<DropdownMenu options={[Array]} groupBy={[String]} placeholder={[String]} selected={[ID]} />

I created this to show categories in a dropdown menu grouped by optgroups. Below is the structure that this element accepts for options:

• categories
  • id
  • name
  • subcategories
    • id
    • name

groupBy

This prop is used to create optgroups. Set this to a string that can be called on the object.

👍

hey how are you handeling licensing?
greetings thomas