How do I filter API data that contains a specific word?

Viewed 27

I have a React web app that contains a product page that pulls in API data, where you can filter items by clicking on a couple checkboxes.

I've taken the same code that works for the other current sidebar checkboxes, adjusted it slightly, and have made a third one called "Show Consignment Inventory Only".

When clicking on this checkbox, I only want to display products that have the word CONSIGNMENT in the string in the API.

"model":"CONSIGNMENT.305E2CR"

My relevant code below..

Defining the Type:

export type searchFilters = {
  ...
  consignmentOnly: boolean;
}

The logic:

if (... ||
    // Consignment Only
      (filters.consignmentOnly &&
        !e.model?.includes("CONSIGNMENT")) ||
      (...) {
         return false;
      }
   )

The onChange function:

  // Consignment only product toggle
  const onConsignmentChange = (e) => {
    const newConsignmentValue: boolean = e.target.checked;

    const updatedSearchFilters: Types.searchFilters = {
      ...props.filters,
      consignmentOnly: newConsignmentValue,
    };

    props.onSearchFilterChange(updatedSearchFilters);
  };

The checkbox:

<label className="checkbox-inline">
   <input
     className="certifiedOnlyCheck"
     onChange={(e) => onConsignmentChange(e)}
     type="checkbox"
     defaultChecked={ConverterBoolean(props.filters.consignmentOnly)}
   />
    <span
      className="data-fr"
      data-fr="Voir seulement les unités certifiées"
      >
        {outputEnFr(
          "Show Consignment Inventory Only",
          "Afficher Uniquement L'inventaire de Consignation",
           props.lang
         )}
    </span>
</label>
0 Answers
Related