title: React JS - confirmation dialog with function callback
body: <p>Here is what I tried, and details what I want to achieve, can someone help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class ConfirmDialog extends React.Component {
    callback(action){
     alert(action)
    }
    
    render(){
      return(
        &lt;div className='dialog'&gt;
          &lt;div&gt;confirm dialog&lt;/div&gt;
          &lt;button onClick={() =&gt; this.callback('yes')}&gt;Yes&lt;/button&gt;
          &lt;button onClick={() =&gt; this.callback('no')}&gt;No&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  class Hello extends React.Component {
   constructor(props){
      super(props);
      this.state = {
     showDialog: false,
      }
    }
    
    onButtonClick(params) {
   //I want yes no callback here without loosing my previous params
      //so i can use switch case here for yes / no action.
     this.setState({showDialog: !this.state.showDialog})
    }
    
    render() {
      return (
   &lt;div&gt;
   &lt;button onClick={() =&gt; this.onButtonClick({test: 'test params'})}&gt;
          Click&lt;/button&gt;
       {
         this.state.showDialog ? 
        &lt;ConfirmDialog callback={this.onButtonClick}/&gt; : null
       }
   &lt;/div&gt;    
      )
    }
  }
  
  ReactDOM.render(
    &lt;Hello /&gt;,
    document.getElementById('container')
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dialog {
    background: tomato;
    width: 150px;
    height: 150px;
    margin: auto; 
  
  }
  
  .dialog button {
    display : inline-block;
    text-align: center;
    margin: 0 10px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
      &lt;!-- This element's contents will be replaced with your component. --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>The on callback function should get which action I clicked and without losing the parameters.
    React JS - confirmation dialog with function callback with the action without loosing the previous parameter</p>
  </blockquote>