[Solved] Filter data with checkbox buttons in React

Christopher Asks: 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.

Code:
 const JobsList = (props) => {

  const pageNumber = props.pageNumber || 1;
  const [jobs, setJobs] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [page, setPage] = useState(pageNumber);
  const [pages, setPages] = useState(1);

  useEffect(() => {
    const fetchJobs = async () => {
      try {
        retrieveJobs();
        retrievePages();
        pages = retrievePages();
        setJobs(jobs);
        setLoading(false);
      } catch (error) {
        console.log(error);
        setLoading(false);
        setError("Some error occured");
      }
    };
    fetchJobs();
  }, [page]);

  const retrievePages = () => {
    JobDataService.getPage(pages)
      .then((response) => {
        setPages(response.data.totalPages);
      })
      .catch((e) => {
        console.log(e);
      });
  };
  const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => {
    return (
      <input
        type={type}
        name={name}
        checked={checked}
        onChange={onChange}
        className="btn--position"
      />
    );
  };
 //plain object as state
  const [checkedItems, setCheckedItems] = useState({}); //plain object as state
  const filteredItems = [];
  const handleChange = (event) => {
    // updating an object instead of a Map
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked,
      filteredItems.
    });
    console.log("from HANDLECHANGE: ", checkedItems)
    // console.log(checkedItems[event.target.checked])
    // find(event.target.name)
  };

  // const handleChange = (event) => {
  //   // mutate the current Map
  //   checkedItems.set(event.target.name, event.target.checked)
  //   // update the state by creating a new Map
  //   setCheckedItems(new Map(checkedItems) );
  //   console.log("checkedItems: ", checkedItems);
  //   find(checkedItems.get(event.target.key))
  // }

  useEffect(() => {
    console.log("checkedItems from UseEffect: ", checkedItems);
    // console.log(checkedItems)
    // find(checkedItems)
  }, [checkedItems]);
  const checkboxes = [
    {
      name: "🤵‍♀️ Finance",
      key: "financeKey",
      label: "financeLabel",
    },
    {
      name: "👩‍🎨 Marketing",
      key: "marketingKey",
      label: "marketingLabel",
    },
    {
      name: "👨‍💼 Sales",
      key: "salesKey",
      label: "salesLabel",
    },
    {
      name: "🥷 Operations",
      key: "operationsKey",
      label: "financeLabel",
    },
    {
      name: "👨‍💻 Software Engineering",
      key: "softwareEngineeringKey",
      label: "softwareEngineeringLabel",
    },
  ];

  const retrieveJobs = () => {
    JobDataService.getAll(page)
      .then((response) => {
        console.log(response.data);
        setJobs(response.data.jobs);
      })
      .catch((e) => {
        console.log(e);
      });
  };
  const refreshList = () => {
    retrieveJobs();
  };

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

  return (
    <div>
      <div>
        <div className="hero-container">
          <div>
            <div className="allButtons-div">
              <div className="buttons-div">
                <div>
                  <label>
                    {checkedItems[""]}
                    {/* Checked item name : {checkedItems["check-box-1"]}{" "} */}
                  </label>
                  {checkboxes.map((item) => (
                    <label key={item.key}>
                      {item.name}
                      <Checkbox
                        name={item.name}
                        checked={checkedItems[item.name]}
                        onChange={handleChange}
                      />
                    </label>
                  ))}
                </div>

The function below fetches data from the MongoDB Realm database

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

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.