Wie kann ich diese doppelte Filterlogik (nach Status und Priorität) in React mithilfe von JavaScript-Array-Methoden vere ⇐ JavaScript

[Anonymous]

Ich baue eine kleine React-App zum Verwalten von Aufgaben.
Jede Aufgabe hat einen Status (wahr/falsch) und eine Priorität (niedrig/mittel/hoch).
Ich habe zwei Filterschaltflächen – eine für den Status und eine für die Priorität – und ich verwende die folgenden Handler, um die angezeigte Liste (taskArray) basierend auf der Auswahl des Benutzers zu aktualisieren.
Hier ist meine Arbeitsweise Code:

Code: Select all

const handleStatus = (e: React.MouseEvent) => {
const label = e.currentTarget.innerText;
setStatusLabel(label);
setStatusActive(e.currentTarget.id);

const priorityArray =
priorityLabel === "All"
? allTasks
: allTasks.filter((x) => x.priority === priorityLabel);

if (label === "All") {
setTaskArray(priorityArray);
} else if (label === "Active") {
setTaskArray(priorityArray.filter((x) => !x.status));
} else if (label === "Complete") {
setTaskArray(priorityArray.filter((x) => x.status));
}
};

const handlePriority = (e: React.MouseEvent) => {
const label = e.currentTarget.innerText;
setPriorityLabel(label);
setPriorityActive(e.currentTarget.id);

const statusArray =
statusLabel === "All"
? allTasks
: statusLabel === "Active"
? allTasks.filter((x) => !x.status)
: allTasks.filter((x) => x.status);

setTaskArray(
label === "All"
? statusArray
: statusArray.filter((x) => x.priority === label)
);
};

Es funktioniert, aber ich glaube, dass es eine prägnantere oder wiederverwendbarere Möglichkeit gibt, dies mithilfe von JavaScript-Array-Methoden zu erreichen – vielleicht durch die Kombination beider Filter in einer Funktion oder eine elegantere Verkettung.
Frage:
Wie kann ich diesen Code vereinfachen oder umgestalten, um beide Filter effizienter zu handhaben (und gleichzeitig die Lesbarkeit beizubehalten)?