javascript - How to show drop menu and hide others in React.js -

i want know best way proceed (don´t need code, way it). i´m trying show dropdown menu when click on it´s li element.

var balloon = react.createclass({displayname: "balloon",         getinitialstate: function() {             return { shaded: false };         },                  handleclick: function(event) {             this.setstate({ shaded: !this.state.shaded });         },         render: function() {              var panel = this.state.shaded ? react.createelement(balloonpanel, {type: this.props.type, data: this.props.data}) : "";              return (                 react.createelement("li", {onclick: this.handleclick},                      react.createelement("a", {href: ""}),                      react.createelement("div", {hidden: true}),                      react.createelement("div", null,                          react.createelement("div", {class: "triangle"}, " "),                          panel                     )                 )             );         }     }); 

here complete code:

thanks in advance.

so assuming drop downs reliant upon 1 another, i.e.. when click 1 others close etc... should built same object , ascribe click event passes parent.

var parentcomponent = react.createclass({ clicked: function () {   alert("you clicked me"); }, return: function () {    render (        <reactlistchild  onclick={this.props.clicked.bind(this)} />     ) }); 

keep in mind need use bind method in order children know 1 clicked (to take appropriate action)

so summing up, parent component should have state variable saying 1 show , set sort of variable, possibly give name of element or something. way if element not listed shown in state others remain closed.

fyi, did not test code, it's rough idea. sort of loop render many of these child elements. remember bind, or you'll burned.