React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class Option extends React.Component {
  render() {
    const { details } = this.props;
    const key = this.props.id;

    return (
      <option value={key} data-items={details.numberMenuItems}>
        {details.name}
      </option>
    )
  }
}

class AddmenuItemForm extends React.Component {
  createMenuItemTest(event) {
  	alert(this.subsectionObjectId.selectedOptions[0].getAttribute('data-items'))
    event.preventDefault();

    const menuItem = {
      subsectionObjectId: this.subsectionObjectId.value,
      orderIndex: this.subsectionObjectId.selectedIndex.data,
    }
  }

  render() {
    const { subsections } = this.props;

    return (
      <div>
        <form ref={(input) => this.menuItemForm = input} onSubmit={(e) => this.createMenuItemTest(e)}>
          <select
            ref={(input) => this.subsectionObjectId = input}
            className="input mtm">
            <Option key={1} id={1} details={{numberMenuItems: 123, name: 'a'}} />
            <Option key={2} id={2} details={{numberMenuItems: 456, name: 'b'}} />
          </select>

          <button type="submit">Add New</button>
        </form>
      </div>
    );
  }
};


ReactDOM.render(
  <AddmenuItemForm name="World" />,
  document.getElementById('container')
);