javascript - ReactJS - Target random element -

i have problems understanding how interact element in react after rendering. got fiddle: https://jsfiddle.net/y7dh3vh5/

var items = ["afghanistan","albania","algeria","andorra","angola"....  var repeatmodule = react.createclass({     getdefaultprops: function() {        return { items: [] }     },     render: function() {         var listitems = this.props.items.map(function(item, i) {             return (                 <div classname="item" key={i}>                    <p>{item}</p>                 </div>             );         });          return (             <div>                {listitems}             </div>         );     }});reactdom.render(<repeatmodule items={items} />, document.getelementbyid('itemlist')); 

and i'm looking way highlight random country when press "highlight random country"-button. there easy way implement this?

thanks in advance.

add state save highlightedindex:

getinitialstate () {     return {         highlightedindex: -1     } }, 

add method button

setnewtarget: function() {     var l = this.props.items.length - 1;     this.setstate({         highlightedindex: this.randominteger(0, l)     }) }, 

put button return render

return (     <div>         <button onclick={this.setnewtarget}>             highlight random country         </button>         {listitems}     </div> ); 

live example: https://jsfiddle.net/ufmagg4o/