Make Whole Div Clickable in React

I have checkbox and its working well. However I wanted the whole div to be clickable also not just the checkbox alone.

Pls check here CLICK HERE

<form onSubmit={handleSubmit}>
      {products.map((product) => (
        <div key={product} style={{ cursor: "pointer" }}>
          {product}
          <Checkbox
            name="products"
            value={product}
            checked={values.products.includes(product)}
            onChange={({ target }) => {
              let updatedProducts;
              if (values.products.includes(product)) {
                updatedProducts = values.products.filter(
                  (product) => product !== target.value
                );
              } else {
                updatedProducts = [...values.products, target.value];
              }
              setFieldValue("products", updatedProducts);
            }}
          />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>

Answer

Wrap the checkbox in label element. This will make the text, i.e. “label” clickable as part of the input. Since label elements are display: inline you will need to also override the display CSS to maintain it as a block level element.

<form onSubmit={handleSubmit}>
  {products.map((product) => (
    <label key={product} style={{ cursor: "pointer", display: "block" }}>
      {product}
      <Checkbox
        name="products"
        value={product}
        checked={values.products.includes(product)}
        onChange={({ target }) => {
          let updatedProducts;
          if (values.products.includes(product)) {
            updatedProducts = values.products.filter(
              (product) => product !== target.value
            );
          } else {
            updatedProducts = [...values.products, target.value];
          }
          setFieldValue("products", updatedProducts);
        }}
      />
    </label>
  ))}
  <button type="submit">Submit</button>
</form>

Edit make-whole-div-clickable-in-react