Hot to get value of button in react - reactjs

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();
}