Have trouble implementing dynamic checklist on react

I am just started on react and I have a challenge with implementing dynamic checkboxes. I have the checkbox items in a firestore collection and fetch them as an array which I store into something that looks like this:

        const checkboxes = [
        {
          name: 'check-box-1',
          key: 'checkBox1',
          label: 'Check Box 1',
          id: 'first',
          value: false
        },
        {
          name: 'check-box-2',
          key: 'checkBox2',
          label: 'Check Box 2',
          id: 'second',
          value: true
        },
        {
          name: 'check-box-3',
          key: 'checkBox3',
          label: 'Check Box 3',
          id: 'third',
          value: false
        },
        {
          name: 'check-box-4',
          key: 'checkBox4',
          label: 'Check Box 4',
          id: 'fourth',
          value: false
        },
      ];

My form is in a class component and I render it like this

class CheckIn extends Component {


state = {
    data1: ''
    
}

render() {
    return(
        <div>
                                            {
        checkboxes && checkboxes 
        .map(checkbox => {
            return(
                <div className="checkbox-area" key={checkbox.id}>
                    <label htmlFor={ checkbox.id }>
                        <input type="checkbox" 
                        name="check-box" 
                        id={checkbox.id}  
                        value = {checkbox.value}
                        onChange = {this.handleCheck}
                        className='filled-in' />
                        <span>{checkbox.label}</span>
                    </label>
                 </div>
                 )
               })
                   }
                </div>

    )
}
}

I am not sure what to do in my handleCheck in order for the form to update state as true if it is checked and false it it is unchecked. For now, this only updates the checked ones and sends 'undefined'

    handleCheck = (e) => {
     this.setState({
         [e.target.id] : true
     })
    }

Please help. Thanks

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW