React JS - confirmation dialog with function callback

You're not passing the props correctly to the ConfigComponent. You Need to use the class constructor and call super on the props.

class ConfirmDialog extends React.Component {
  constructor(props) {
    super(props)
  }
  callback(action){
    alert(action)
  }

  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.props.callback('yes')}>Yes</button>
        <button onClick={() => this.props.callback('no')}>No</button>
      </div>
    )
  }
}

And now in your Hello component you can work with the value of the callback

class Hello extends React.Component {
    constructor(props){
    super(props);
    this.state = {
      showDialog: false,
    }
  }

  onButtonClick(yesOrNo) {
    //I want yes no callback here without loosing my previous params
    //so i can use switch case here for yes / no action.
    console.log(yesOrNo)
    this.setState({showDialog: !this.state.showDialog})
  }

  render() {
    return (
    <div>
    <button onClick={() => this.onButtonClick({test: 'test params'})}>
        Click</button>
     {
       this.state.showDialog ? 
      <ConfirmDialog callback={this.onButtonClick.bind(this)}/> : null
     }
    </div>    
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

Here is working example https://codesandbox.io/s/r09z191w3p

You have to use the callback function passed through the components props:

<button onClick={() => this.props.callback('yes')}>Yes</button>
<button onClick={() => this.props.callback('no')}>No</button>

You can add a function in the props of your ConfirmDialog component

<ConfirmDialog callback={this.onSelection}/>

and call it when the "yes" or "no" button is clicked

this.props.callback(action);

You now have your value inside the onSelection function.

class ConfirmDialog extends React.Component {
  callback(action){
  	this.props.callback(action);
  }
  
  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.callback('yes')}>Yes</button>
        <button onClick={() => this.callback('no')}>No</button>
      </div>
    )
  }
}

class Hello extends React.Component {
	constructor(props){
    super(props);
    this.state = {
	    showDialog: false,
    }
  }
  
  onSelection(value) {
    console.log("My dialog value is :", value); //Value contains "yes" or "no"
    //set value to state or use it here
  }
  
  onButtonClick(params) {
  	this.setState({showDialog: !this.state.showDialog})
  }
  
  render() {
    return (
      <div>
        <button onClick={() => this.onButtonClick({test: 'test params'})}>Click</button>
         {
            this.state.showDialog ? 
              <ConfirmDialog callback={this.onSelection}/> 
            : 
              null
         }
      </div>    
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

.dialog {
  background: tomato;
  width: 150px;
  height: 150px;
  margin: auto;
}

.dialog button {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

In order to better manage your react code, incorporate PropTypes in your code. https://www.npmjs.com/package/prop-types

Add a types for callback:

    ConfirmDialog.propTypes = {
       yesCallback: PropTypes.func,
       noCallback: PropTypes.func
    };

Use the callback in your Confirm Dialog Component

 <button onClick={() => this.props.yesCallback("Yes")}>Yes</button>
 <button onClick={() => this.props.noCallback("No")}>No</button>

Pass props from parent components

<ConfirmDialog
            yesCallback={message => {
              alert(message);
            }}
            noCallback={message => {
              alert(message);
            }}
/>