class Form extends Component {

  state = {
    step: 0,
    foo: '',
    bar: '',
    fruits: ['apple'],
  }

  constructor(props) {
    super(props);
    this.onInputChange = this.onInputChange.bind(this);
    this.onCheckboxChange = this.onCheckboxChange.bind(this);
  }

  onInputChange({ target }) {
    this.setState({
      [target.name]: target.value
    });
  }

  onCheckboxChange({ target }) {
    if (target.checked) {
      //add to array
      this.setState({
        [target.name]: [
          ...this.state[target.name],
          target.value,
        ]
      });
    } else {
      //remove from array
      this.setState({
        [target.name]: this.state[target.name].filter(value => value != target.value)
      });
    }
  }

  render() {
    return (
      <form>
        { this.state.step === 0 && <Step0 onInputChange={this.onInputChange} onCheckboxChange={this.onCheckboxChange} values={this.state} /> }
        { this.state.step === 1 && <Step1 onInputChange={this.onInputChange} onCheckboxChange={this.onCheckboxChange} values={this.state} /> }
        { this.state.step === 2 && <Step2 onInputChange={this.onInputChange} onCheckboxChange={this.onCheckboxChange} values={this.state} /> }

        <pre>{ JSON.stringify(this.state, null, 2) }</pre>

      </form>
    );
  }

}

function Step0({ onInputChange, onCheckboxChange, values }) {
  return (
    <ul>
      <li>
        <b>Foo:</b>
        <input type="text" name="foo" value={values.foo} onChange={onInputChange} />
      </li>
      <li>
        <b>Bar:</b>
        <input type="text" name="bar" value={values.bar} onChange={onInputChange} />
      </li>
      <li>
        <b>Checkbox</b>
        <p>
          <label>
            <input type="checkbox" name="fruits" value="apple" onChange={onCheckboxChange} checked={values.fruits.indexOf('apple') != -1} />
            <b>Apple</b>
          </label>
        </p>
        <p>
          <label>
            <input type="checkbox" name="fruits" value="orange" onChange={onCheckboxChange} checked={values.fruits.indexOf('orange') != -1} />
            <b>Orange</b>
          </label>
        </p>
      </li>
    </ul>
  );
}