Hey guys i'm stuck with a stupid problem where i'm having my checkbox component that sets the state of the checkbox but doesn't read it and couldn't figure out how to. I'm using the checkboxes in a modal and currently when the modal is closed, the state of the checkboxes isn't saved. So here is the component :

import { useState } from 'react';
import { handleToggle } from '../../utils';

const Checkboxes = ({ list, handleFilters }) => {
  const [checkedArray, setCheckedArray] = useState([]);

  const onChangeHandler = (checkboxId) => {
    const newState = handleToggle(checkboxId, checkedArray);
    setCheckedArray(newState);
    handleFilters(newState.map((id) => list[id].value));
  };

  return list.map((item, index) => {
    return (
      <div key={index}>
        <input
          type="checkbox"
          id={item.name}
          checked={checkedArray.indexOf(item.id) !== -1}
          onChange={() => onChangeHandler(item.id)}
        />
        <label htmlFor={item.name}>{item.label}</label>
      </div>
    );
  });
};

export default Checkboxes;

And in my app :

  const handleFilters = (checkboxState, key) => {
    const logic = 'AND';
    const newFilters = { ...selected };
    newFilters[key] = checkboxState;

Have a good monday!