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://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.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

var status = {
    active  : 'Active',
    inActive: 'In Active'
};

var featuresType = {
    dc              : 'DC',
    locker        : 'Locker',
    store          : 'Store',
    dropShipVendor  : 'Drop Ship Vendor'
};


var Features = React.createClass({

    getInitialState: function () {
        //TODO, this may come from API if there is any default load on select
        return {
            editing       : false,
            typeSelected  : 'dc',
            storeInventory: false //Consider  Store Inventory is not integrated
        };
    },

    getOptions: function (status) {
        var options = [];
        for (let i in status) {
            options.push(<option key={i} value={i}>{status[i]}</option>);
        }
        return options;
    },

    handleChange: function (field, e) { 
        if (field == 'type') {
            let selected = e.target.value;
            this.setState({typeSelected: selected})
        }
        /*Why the console is taking the previous selecte option, ex: if Locker is selectec below lone prints 'dc' */
         console.log(field ,',',  this.state.typeSelected)
    },
    render      : function () {
        var self     = this;
        var customer = this.props.customer;
        var editing  = this.state.editing;
        return (
            <div>
                <div className="list-form-elem editable">
                    <div className="mdl-grid">
                        <div className="mdl-cell mdl-cell--6-col"><label>Type:</label></div>
                        <div className="mdl-cell mdl-cell--6-col">
                            <select id='featuresType'
                                   
                                    onChange={this.handleChange.bind(this, 'type')}
                                    >
                                {this.getOptions(featuresType)}
                            </select>
                        </div>
                    </div>
                    <div className="mdl-grid">
  ...