broken - React Stop Immediate Propagation - DropDown

by Trever Shick

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="here" />

SCSS

body {
    font-family:"ProximaNova";
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

ul.dropdown {
    &.active {
        border:1px solid green;
        color:green;
    }    
    &.inactive {
        display:none;
    }
}
button  {
    margin:15px;
}
div.wrapper-dropdown {
    span {
        border:1px solid #c9c9c9;
        padding:5px;
    }
}

Babel + JSX

class DropDown extends React.Component{
		constructor(props) {
    	super(props);
    	this.state = { expanded:false};
    }
    _onClick(text) {
        alert("You chose " + text);
    }
    _toggle(event) {
        this.state.expanded = !this.state.expanded;
        event.stopPropagation();
        event.nativeEvent.stopImmediatePropagation();
    }
    
    handleClick() {
            if(this.state.expanded) {
               this.state.expanded = false;
            }    
    }
    render() {
        var ulClasses = ['dropdown'];
        ulClasses.push(this.state.expanded ? 'active' : 'inactive');
        return (<div className="wrapper-dropdown">
            <span onClick={ this._toggle } >I'm kinda the label! V</span>
            <ul className={ ulClasses.join(" ") }>
                <li onClick={this._onClick.bind(this,'Im Hidden')}>I'm hidden!</li>
                <li onClick={this._onClick.bind(this,'Me too')}>Me too!</li>
                <li onClick={this._onClick.bind(this,'So do i')}>So do I.</li>
            </ul>
            <br/>
            <button>whoa</button>
        </div>);
    }
}

ReactDOM.render(<DropDown />, document.getElementById("here"));