javascript - Show or hide element -

i messing around react.js first time , cannot find way show or hide on page via click event. not loading other library page, looking native way using react library. have far. show results div when click event fires.

var search= react.createclass({     handleclick: function (event) {         console.log(this.prop);     },     render: function () {         return (             <div classname="date-range">                 <input type="submit" value="search" onclick={this.handleclick} />             </div>         );     } });  var results = react.createclass({     render: function () {         return (             <div id="results" classname="search-results">                 results             </div>         );     } });  react.rendercomponent(<search /> , document.body); 

the key update state of component in click handler using setstate. when state changes applied, render method gets called again new state:

var search = react.createclass({     getinitialstate: function() {         return { showresults: false };     },     onclick: function() {         this.setstate({ showresults: true });     },     render: function() {         return (             <div>                 <input type="submit" value="search" onclick={this.onclick} />                 { this.state.showresults ? <results /> : null }             </div>         );     } });  var results = react.createclass({     render: function() {         return (             <div id="results" classname="search-results">                 results             </div>         );     } });  reactdom.render(<search />, document.getelementbyid('container')); 

http://jsfiddle.net/kb3gn/15084/