lundi 26 juillet 2021

Filter data with checkbox buttons in React

I would like to filter data based on pressing multiple checkbox buttons. Currently only the most recently pressed button works and shows the output instead of also showing outputs from other buttons which are pressed as well.

The state of checkbox buttons works correctly i.e. when clicked it is true, when unclicked it is false - however I am not sure how to connect it with my find function which fetches the data.

  const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => {
    return (
      <input
        type={type}
        name={name}
        checked={checked}
        onChange={onChange}
      />
    );
  };
  const [checkedItems, setCheckedItems] = useState({}); //plain object as state
  const handleChange = (event) => {
    // updating an object instead of a Map
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked,
    });
    find(event.target.name)
  };

useEffect(() => {
    console.log("checkedItems from UseEffect: ", checkedItems); }, [checkedItems]);
  const checkboxes = [
    {
      name: "đŸ€”‍♀️ Finance",
      key: "financeKey",
      label: "financeLabel",
    },
    {
      name: "đŸ‘©‍🎹 Marketing",
      key: "marketingKey",
      label: "marketingLabel",
    },
    {
      name: "👹‍đŸ’Œ Sales",
      key: "salesKey",
      label: "salesLabel",
    },
  ];
                  <label>
                    {checkedItems["check-box-1"]}{" "}
                    {/* Checked item name : {checkedItems["check-box-1"]}{" "} */}
                  </label>{" "}
                  <br />
                  {checkboxes.map((item) => (
                    <label key={item.key}>
                      {item.name}
                      <Checkbox
                        name={item.name}
                        checked={checkedItems[item.name]}
                        onChange={handleChange}  
                      />
                    </label>
                  ))}
           

The function below fetches data from database

  const find = (query, by) => {
    JobDataService.find(query, by)
      .then((response) => {
        setJobs(response.data.jobs);
        setPages(response.data.totalPages);
      })
      .catch((e) => {
        console.log(e);
      });
  };



Aucun commentaire:

Enregistrer un commentaire