G5

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import ListItem from './ListItem';
class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2,
      fields:{isGoing:true, numberOfGuests: 2}
    };
    //fields={isGoing:true};

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked.toString() : target.value;
    const name = target.name;
    const fields = this.state.fields;

    fields[event.target.name] = value;
    console.log(fields);
    this.setState({
      [name]: value
    });
  }

  render() {
    const fields = this.state.fields;
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"

            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
        {Object.keys(fields).map((item) =>
        <li>{item}: {fields[item]}</li>
        )
        }

      </form>


    );
  }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('app')
);