title: Hot to get value of button in react
body: <p>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.</p>
  
  <p>This is my code:</p>
  
  <pre><code>class CreateData extends Component {
  state = {
      step: 1,
      nome:'',
      email:'',
      util: '',
  }
  
  nextStep = () =&gt; {
      const { step } = this.state
      this.setState({
          step : step + 1
      })
  }
  
  prevStep = () =&gt; {
      const { step } = this.state
      this.setState({
          step : step - 1
      })
  }
  
  handleChange = input =&gt; event =&gt; {
      this.setState({ 
          [input] : event.target.value, 
      })
  }
  
  renderSwitch(step) {
  
  
      const { nome, email,  util } = this.state;
      const values = { nome, email, util};
  
      switch (step) {
          case 1:
          return &lt;UserName
          nextStep = {this.nextStep}
          handleChange = {this.handleChange}
          values = {values}
          /&gt;
          case 2:
          return &lt;UserEmail
          nextStep = {this.nextStep}
          prevStep = {this.prevStep}
          handleChange = {this.handleChange}
          values = {values}
              /&gt;
              case 3:
              return &lt;UserUtil
              nextStep = {this.nextStep}
              prevStep = {this.prevStep}
              handleChange = {this.handleChange}
              values = {values}
              /&gt;
  
              case 4:
              return &lt;CrossHomePage/&gt;
          }
      }
      render() {
  
          const {step} = this.state;
  
          return (
              &lt;div&gt;
                  &lt;HeaderPage /&gt;
                  {this.renderSwitch(step)}
              &lt;/div&gt;
          );
        }
  }
  
  export default CreateData
  </code></pre>
  
  <p>In my component to get name is ok:</p>
  
  <pre><code>class UserName extends Component{
  
  saveAndContinue = (e) =&gt; {
      e.preventDefault()
      this.props.nextStep()
  }
  
  render(){
  
      const { values } = this.props;
  
      return(
          &lt;Grid className={style.container}&gt;
              &lt;Form&gt;
                  &lt;fieldset&gt;
                      &lt;input
                      className="input"
                      onChange={this.props.handleChange('nome')}
                      defaultValue={values.nome}
                      type="text"
                      required
                      /&gt;
                  &lt;/fieldset&gt;
                  &lt;Button className="button" onClick={this.saveAndContinue}&gt; Continue &lt;/Button&gt;
              &lt;/Form&gt;
          &lt;/Grid&gt;
      )
  }
  }
  
  export default UserName;
  </code></pre>
  
  <p>But in my component to get button value doesn't work, I want to get the value of the button clicked.</p>
  
  <pre><code>&lt;input 
  type="button"
  className="input"
  onChange={values.moradia[1]}
  value='yes'
  defaultValue={values.util}
  onClick={ this.saveAndContinue }
  /&gt;
  &lt;input 
  type="button"
  className="input"
  onChange={values.util}
  value='no'
  defaultValue={values.util}
  onClick={ this.saveAndContinue }
  /&gt;
  </code></pre>
  
  <p>How I do get the value of the button clicked in this case and save this value to invoke in another component?</p>
  
  <p>Example here.
  I want to get value of buttons yes or no
  <a href="https://codesandbox.io/s/r1lm9j22l4" rel="nofollow noreferrer">https://codesandbox.io/s/r1lm9j22l4</a></p>