'Dropdowns and filters not applied with REACT

I'm not able to display my menus (_ids.name) that match my filters from the 2 dropdowns (MyNorm1,...MyNorm6) and (Classification1,...Classification6). For example, when I click on my filters and select for example MyNorm6 and Classifications1 I want to see all the names of my menus that match these filters i.e Pea Soup , Chicken tenders and Samosa for this example.

Here an image to get the idea:enter image description here

export default function Filters({ onValidation, display }) {
  const [filters, setFilters] = useState({});
  const [submit, setSubmit] = useState();

  const changeHandler = (e) => {
    const { name, checked } = e.target;
    setFilters((filters) => ({
      ...filters,
      [name]: checked
    }));
  };
...
  const NORMS = [
   ...
    { label: "MyNorm6", value: "norm6", checked: false }
  ];

  const CLASSIFICATIONS = [
   ...
    { label: "Classification5", value: "Classification5", checked: false }
  ];

  return (
    <div>
      //Apply & Reset button not working...
      </div>
      <div className="text-md font-bold  rounded-md p-5 dark-shadow-sm leading-8 text-gray-500 flex flex-wrap gap-x-8 gap-y-4">
        Norms: <CustomDropdown options={NORMS} isMulti={true} />
      </div>
      ...      
      <div className="my-3 h-6 text-xl  uppercase font-bold leading-8 text-gray-500">
        Matched Menus
      </div>
       //FILTERS NOT WORKING ...
            ...
                {NORMS.map((name) => (
                  <td key={name}>
                    <label>
                      <input
                        type="text"
                        checked={filters[name]}
                        onChange={changeHandler}
                        name={name}
                        className="w-8 h-3"
                      />
                      {name}
                    </label>
                  </td>
                ))}
              </td>
            </tr>
            {data
              .filter((item) => {
                const filterEntries = Object.entries(filters)
                  .filter(([, value]) => Boolean(value))
                  .map(([key]) => key);

                if (filterEntries.length) {
                  if (filters.item) {
                    return item.norms.some((n) =>
                      filterEntries.includes(n.norms)
                    );
                  }
                  if (filters.item) {
                    return item.classification.some((n) =>
                      filterEntries.includes(n.classification)
                    );
                  }
                }
                return true;
              })
              .map((item) => (
                <tr key={item.id}>
                  <td>{item.name}</td>
                </tr>
              ))}
          </tbody>
        </div>
      </div>
    </div>
  );
}

Here the code



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source