score:1

Accepted answer
import React, { useState } from 'react';
import { Col, Form, Button } from 'react-bootstrap';

export default function App() {
  const [categoryFilterOptions, setCategoryFilterOptions] = useState([
    { label: 'Category1', checked: true },
    { label: 'Category2', checked: true },
    { label: 'Category3', checked: true },
    { label: 'Category4', checked: true },
  ]);

  const resetAllChecks = () => {
    setCategoryFilterOptions(
      categoryFilterOptions.map((option) => ({
        label: option.label,
        checked: true,
      }))
    );
  };

  return (
    <Col>
      <h5 style={{ textAlign: 'center', color: 'black' }}>
        Category Filtering:
      </h5>
      <DropdownChecklist
        disabled={false}
        checkOptions={categoryFilterOptions}
        returnChecksState={setCategoryFilterOptions}
      ></DropdownChecklist>
      <Button
        style={{ width: '100%' }}
        onClick={() => {
          resetAllChecks();
        }}
      >
        Reset Filter
      </Button>
    </Col>
  );
}

const DropdownChecklist = ({ disabled, checkOptions, returnChecksState }) => {
  function setCheck(id) {
    var newArray = [...checkOptions];
    var newElement = checkOptions[id];
    newElement.checked = !newElement.checked;
    newArray[id] = newElement;
    returnChecksState(newArray);
  }

  return (
    <Form>
      <fieldset disabled={disabled}>
        {checkOptions.map((checkItem, i) => (
          <Form.Check
            key={checkItem.label}
            id={i}
            type="checkbox"
            label={checkItem.label}
            checked={checkItem.checked}
            onChange={() => {
              setCheck(i);
            }}
          ></Form.Check>
        ))}
      </fieldset>
    </Form>
  );
};

score:2

{checks.map((checkItem, i) => (
    <Form.Check
        key={i}
        id={i}
        type='checkbox'
        label={checkItem.label}
        checked={checkItem.checked}
        onChange={() => {setCheck(i)}}
    ></Form.Check>
)) }

Related Query

More Query from same tag