class App extends Component {
  constructor() {
    super();
    this.state = {
      people: [
        {
          'firstname': "Paul",
          'id': "1"
        },
         {
          'firstname': "Martin",
          'id': "2"
        },
         {
          'firstname': "Joseph",
          'id': "3"
        },
         {
          'firstname': "Gregor",
          'id': "4"
        }
      ],
       peopleChecked: [
         {
          'firstname': "Martin",
          'id': "2"
        },
         {
          'firstname': "Gregor",
          'id': "4"
        }
      ],
      selectPeopleId: []
    }
  }

  handleSelect = (person) => {
    this.setState({
      selectPeopleId: person.id
    })
  }


  render() {
    return (
      <div>
        {this.state.people.map(person => (
          <div key={person.id} className="mb-1">
            <Form.Check
              type={'checkbox'}
              id={person.id}
              label={person.firstname}
              checked={this.state.peopleChecked.some(({ id}) => id === person.id)}
              onChange = {() => this.handleSelect(person)}
            />
          </div>
        ))}
      </div>
    );
  }
}