React Bootstrap clickable Form.Check

Question

im having trouble with Form.Check in ReactBootstrap, how can i have the whole div clickable (when i click on label, the box is checked) ? here is my code:

import React, { useState, useEffect } from "react";
import { Form } from "react-bootstrap";
const data = ["icecream", "coffee", "burger"];
const [checkedChoices, setCheckedChoices] = useState([]);
const onchangeCheckbox = (e) => {
!e.target.checked
  ? setCheckedChoices(
      checkedChoices.filter((each) => each !== e.target.value)
    )
  : setCheckedChoices([...checkedChoices, e.target.value]);
};
return (
<div>
  <Form>
    <Form.Group>
      {data.map((each) => {
        return (
          <Form.Check
            label={each}
            name="ex6"
            value={each}
            onChange={onchangeCheckbox}
          />
        );
      })}
    </Form.Group>
    <Form.Text>
      you chose{" "}
      {checkedChoices.length == 0 ? "nothing " : checkedChoices.toString()}
    </Form.Text>
  </Form>
</div>
);
};
export default Example6Forward;

Answer 1

You should add id to Form.Check. For example:

    {data.map((each, idx) => {
        return (
          <Form.Check
            id={idx}
            label={each}
            name="ex6"
            value={each}
            onChange={onchangeCheckbox}
          />
        );
      })}