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>