title: selected options from radio and checkbox are not passing data
body: <p>I am trying to make a set of questions through multiple pages, so I need the selected answer from page 1 and page 2 to be passed to page 3 because page 3 is like the confirmation page which will show all the selected answer from the past 2 pages.</p>
  
  <p>The interface is successfully shown, well, easy but it seems like there is no data passed at all, oh, and the types of questions are radio and checkbox, so it's kinda hard for me because these 2 types are something new for me (if textarea or normal input, is easy). </p>
  
  <p>This is the <em>mainpage.jsx</em></p>
  
  <pre><code>// MainForm.jsx
  import React, { Component } from 'react';
  import AircondQuantity from './AircondQuantity';
  import ServicePackage from './ServicePackage';
  import Confirmation from './Confirmation';
  import Success from './Success';
  
  class MainForm extends Component {
      state = {
          step: 1,
          oneAircond: ''
      }
  
      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 })
      }
  
      render(){
          const {step} = this.state;
          const { oneAircond } = this.state;
          const values = { oneAircond };
          switch(step) {
          case 1:
              return &lt;AircondQuantity 
                      nextStep={this.nextStep} 
                      handleChange = {this.handleChange}
                      values={values}
                      /&gt;
          case 2:
              return &lt;ServicePackage 
                      nextStep={this.nextStep}
                      prevStep={this.prevStep}
                      handleChange = {this.handleChange}
                      values={values}
                      /&gt;
          case 3:
              return &lt;Confirmation 
                      nextStep={this.nextStep}
                      prevStep={this.prevStep}
                      values={values}
                      /&gt;
          case 4:
              return &lt;Success /&gt;
          }
      }
  }
  
  export default MainForm;
  </code></pre>
  
  <p>this is the first page, <em>AircondQuantity.jsx</em></p>
  
  <pre><code>// AircondQuantity.jsx
  import React, { Component } from 'react';
  import { Form, Button, FormRadio, Radio } from 'semantic-ui-react';
  
  class AircondQuantity extends Component{
  
      saveAndContinue = (e) =&gt; {
          e.preventDefault()
          this.props.nextStep()
      }
  
      render(){
          const { values } = this.props;
          return(
              &lt;Form &gt;
                  &lt;h1 className="ui centered"&gt; How many aircond units do you wish to service? &lt;/h1&gt;
  
                  &lt;Form.Field&gt;
                      &lt;Radio
                          label='1'
                          name='oneAircond'
                          value='oneAircond'
                          //checked={this.state.value === this.state.value}
                          onChange={this.props.handleChange('oneAircond')}
                          defaultValue={values.oneAircond}
                      /&gt;
                  &lt;/Form.Field&gt;
  
                  &lt;Button onClick={this.saveAndContinue}&gt; Next &lt;/Button&gt;
              &lt;/Form&gt;
          )
      }
  }
  
  export default AircondQuantity;
  </code></pre>
  
  <p>this is the next page, <em>ServicePackage.jsx</em></p>
  
  <pre><code>// ServicePackage.jsx
  import React, { Component } from 'react';
  import { Form, Button, Checkbox } from 'semantic-ui-react';
  import { throws } from 'assert';
  
  class ServicePackage extends Component{
      saveAndContinue = (e) =&gt; {
          e.preventDefault();
          this.props.nextStep();
      }
  
      back  = (e) =&gt; {
          e.preventDefault();
          this.props.prevStep();
      }
  
      render(){
          const { values } = this.props
          return(
          &lt;Form color='blue' &gt;
              &lt;h1 className="ui centered"&gt; Choose your package &lt;/h1&gt;
              &lt;Form.Field&gt;
                  &lt;Checkbox 
                  label={&lt;label&gt; Chemical Cleaning &lt;/label&gt;} /&gt;
              &lt;/Form.Field&gt;
  
              &lt;Form.Field&gt;
                  &lt;Checkbox 
                  label={&lt;label&gt; Deep Cleaning &lt;/label&gt;} /&gt;
              &lt;/Form.Field&gt;
  
              &lt;Button onClick={this.back}&gt; Previous &lt;/Button&gt;
              &lt;Button onClick={this.saveAndContinue}&gt; Next &lt;/Button&gt;
          &lt;/Form&gt;
          )
      }
  }
  
  export default ServicePackage;
  </code></pre>
  
  <p>this is the <em>confirmation.jsx</em> page, the page that will show all the selected options</p>
  
  <pre><code>// Confirmation.jsx
  import React, { Component } from 'react';
  import { Button, List } from 'semantic-ui-react';
  import AircondQuantity from './AircondQuantity';
  
  class Confirmation extends Component{
      saveAndContinue = (e) =&gt; {
          e.preventDefault();
          this.props.nextStep();
      }
  
      back  = (e) =&gt; {
          e.preventDefault();
          this.props.prevStep();
      }
  
      render(){
          const {values: { oneAircond }} = this.props;
  
          return(
              &lt;div&gt;
                  &lt;h1 className="ui centered"&gt; Confirm your Details &lt;/h1&gt;
                  &lt;p&gt; Click Confirm if the following details have been correctly entered &lt;/p&gt;
                  &lt;List&gt;
                      &lt;List.Item&gt;
                          &lt;List.Content&gt; Aircond Quantity: {oneAircond}&lt;/List.Content&gt;
                      &lt;/List.Item&gt;
                  &lt;/List&gt;
  
                  &lt;Button onClick={this.back}&gt;Back&lt;/Button&gt;
                  &lt;Button onClick={this.saveAndContinue}&gt;Confirm&lt;/Button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Confirmation;
  </code></pre>
  
  <p>I am <strong>very new</strong> in using React and I know that I have some mistakes in transferring values or variables but I can't detect it, coz I am a newbie, so em, can you help me? thank you.</p>