My DropdownList

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

.container {
    width: 200px;
}

.dropdown {
    border: 1px solid blue;
    cursor: pointer;
    color: blue;
}

.dropdown:after {
    float: right;
    margin-right: 4px;
    content: '▼';
}

.dropdown.disabled {
    cursor: not-allowed;
    opacity: 1;
    color: #E6E6E6;
}

.dropdown:hover:not(.disabled) {
    background-color: #E6E6E6;
}

.popup {
    border: 1px solid orange;
    max-height: 135px;
    margin-top: 2px;
    color: orange;
}

.list {
    border: 1px solid green;
    margin: 2px;
    padding: 2px;
    list-style-type: none;
    color: green;
    overflow: auto;
    max-height: 125px;
}

.list li {
    cursor: pointer;
}

.list li:hover:not(.disabled):not(.selected) {
    background-color: #E6E6E6;
}

.list li.selected {
    background-color: grey;
}

.list li.disabled {
    cursor: not-allowed;
    opacity: 1;
    color: #E6E6E6;
}

.hidden {
    display: none;
}

JavaScript 1.7

'use strict';

var cx = React.addons.classSet;

var App = React.createClass({

    menuItems: [
        {id: 0, text: "Fannie Smith", disabled: false, selected: true},
        {id: 1, text: "Nannie Williams", disabled: false, selected: false},
        {id: 2, text: "Zachary Diaz", disabled: true, selected: false},
        {id: 3, text: "Matthew Diaz", disabled: true, selected: false},
        {id: 4, text: "Lelia Williams", disabled: false, selected: false},
        {id: 5, text: "Norman Williams", disabled: false, selected: false},
        {id: 6, text: "Louise Smith", disabled: false, selected: false}
    ],

    getInitialState: function(){
        return {
            data: this.menuItems
        }
    },

    render: function() {
        return (
            <div>
            <DropdownList
                data={this.state.data}
                selectedIndex={0} //this property overrides the "selected" attribute in the initial list of items
                onSelectedIndexChange={this.onDropdownListItemChange}
                isOpened={false}
                isDisabled={false}/>

                <div id="console"></div>
            </div>
        );
    },

    onDropdownListItemChange: function (index) {

        console.log(this.menuItems[index].text);
    }
});

var DropdownList = React.createClass({

    //todo should support custom rendering for the list items and the list itself

    //API
    propTypes: {
        data: React.PropTypes.array.isRequired,
        selectedIndex: React.PropTypes.number,
        onSelectedIndexChange: React.PropTypes.func,
        isOpened: React.PropTypes.bool,
        isDisabled: React.PropTypes.bool
    },

    getInitialState: function(){
        return {
            data: this.props.data,
            selectedIndex: this.props.selectedIndex || 0,
            isOpened: this.props.isOpened || false,
            isDisabled: this.props.isDisabled || false
        }
    },

    componentWillReceiveProps: function(props) {

   ...