Hot to get value of button in react

Question

I have a form with steps name, email, util. When a have input I can get the value inserts, but when a have input button with options true or false, I can't get the values.

This is my code:

class CreateData extends Component {
state = {
    step: 1,
    nome:'',
    email:'',
    util: '',
}

nextStep = () => {
    const { step } = this.state
    this.setState({
        step : step + 1
    })
}

prevStep = () => {
    const { step } = this.state
    this.setState({
        step : step - 1
    })
}

handleChange = input => event => {
    this.setState({ 
        [input] : event.target.value, 
    })
}

renderSwitch(step) {


    const { nome, email,  util } = this.state;
    const values = { nome, email, util};

    switch (step) {
        case 1:
        return <UserName
        nextStep = {this.nextStep}
        handleChange = {this.handleChange}
        values = {values}
        />
        case 2:
        return <UserEmail
        nextStep = {this.nextStep}
        prevStep = {this.prevStep}
        handleChange = {this.handleChange}
        values = {values}
            />
            case 3:
            return <UserUtil
            nextStep = {this.nextStep}
            prevStep = {this.prevStep}
            handleChange = {this.handleChange}
            values = {values}
            />

            case 4:
            return <CrossHomePage/>
        }
    }
    render() {

        const {step} = this.state;

        return (
            <div>
                <HeaderPage />
                {this.renderSwitch(step)}
            </div>
        );
      }
}

export default CreateData

In my component to get name is ok:

class UserName extends Component{

saveAndContinue = (e) => {
    e.preventDefault()
    this.props.nextStep()
}

render(){

    const { values } = this.props;

    return(
        <Grid className={style.container}>
            <Form>
                <fieldset>
                    <input
                    className="input"
                    onChange={this.props.handleChange('nome')}
                    defaultValue={values.nome}
                    type="text"
                    required
                    />
                </fieldset>
                <Button className="button" onClick={this.saveAndContinue}> Continue </Button>
            </Form>
        </Grid>
    )
}
}

export default UserName;

But in my component to get button value doesn't work, I want to get the value of the button clicked.

<input 
type="button"
className="input"
onChange={values.moradia[1]}
value='yes'
defaultValue={values.util}
onClick={ this.saveAndContinue }
/>
<input 
type="button"
className="input"
onChange={values.util}
value='no'
defaultValue={values.util}
onClick={ this.saveAndContinue }
/>

How I do get the value of the button clicked in this case and save this value to invoke in another component?

Example here. I want to get value of buttons yes or no https://codesandbox.io/s/r1lm9j22l4

Answer 1

Using event.target.value

Add value property to Button

 <Button className="button" value="continue" onClick={this.saveAndContinue}> Continue </Button>

  saveAndContinue = (e) => {
       e.preventDefault();
       console.log(e.target.value); //will give you the value continue
       this.props.nextStep();
  }