javascript - How to remove React-bootstrap popover onClick? -

i rendering table inside popover, triggered event in react class.

the table correctly rendered , shown. want user able remove again, button in popover.

i think i'm on right path, right now, nothing happens when user clicks button. start out false , when it's rendered, return true; how hide popover?

sample code:

let sample = react.createclass({      getinitialstate : function () {         return{             showtable: false,             data: [],             selectedoption: this.selectedoption,         };     },      onclick: function() {         this.setstate({ showtable: false });     },      loadajax : function // ajax call          // in here --> this.setstate({ showtable: true });      rendertable // table content rendered here      render : function () {          let tabledata = this.state.data;          if (tabledata && this.state.selectedoption) {             return (                 <popover classname="styling-table"                          id="popover-trigger-focus"                          title={this.state.selectedoption}                          ref="popover">                     <button onclick={this.onclick} />                     <table striped bordered condensed hover>                         <thead>                         <tr>                             <th>header 1</th>                             <th>header 2</th>                             <th>header 3</th>                         </tr>                         </thead>                         <tbody>                         {tabledata.map(this.rendertable)}                         </tbody>                     </table>                 </popover>             )         }         else {             return <div></div>         }     }  }); 

add showtable if condition in render function:

render : function () {     let tabledata = this.state.data,         showtable = this.state.showtable;      if (showtable && (tabledata && this.state.selectedoption)) {         // show popup     }     else {         // show empty div     } } 

this way, when click <button>, this.state.showtable, component re-render , show correct output.