Фильтр с несколькими флажками и получением данных с помощью React ⇐ Javascript

[Anonymous]

Я пытаюсь реализовать фильтр с флажками, у меня есть мои данные в файле JSON.
Я получаю свои данные из json
это выглядит так: < /p>

Код: Выделить всё

{
"subjects": [
{
"año_cuatri": "1° 1°",
"codigo": "1.1.1",
"nombre": "Técnicas de Programación",
"estado": "Promocionada",
"año_cursada": "2024 2°C",
"nota": 8,
"tiene_apuntes": true,
"link_apuntes": "111_tecnicas_de_programacion"
},
...
]}
< /code>
Я пытаюсь сделать его, и все в порядке, но когда я реализую фильтры с флажками, у меня возникают проблемы. Я не могу отфильтровать данные и повторно повторно заправлять данные фильтра.
Вы не могли бы помочь мне?const Materias_List = () => {
const [dataApi, setDataApi] = useState([]);

const [estadoChecked, setEstadoChecked] = useState({
materia_promocionada: false,
materia_pendiente: false,
materia_cursando: false,
materia_tiene_apuntes: false,
});

let api_subjects = [];
let api_subjects_filtered = [];

const fetchData = async () => {
try {
api_subjects = await degree_in_software_development.subjects;
setDataApi(api_subjects);
} catch (e) {
console.log("Error al consumir API", e);
} finally {
console.log("FINALLY api_subjects", api_subjects);
console.log("FINALLY dataApi", dataApi);
console.log("Finalizó la carga");
}
};

const handleOnChange = async (e) => {
console.log("handleOnChange", e); // e: SyntheticBaseEvent {} > target: input#materia_cursando > checked: true||false

console.log("estadoChecked", estadoChecked);
setEstadoChecked({ ...estadoChecked, [e.target.name]: e.target.checked });
console.log("estadoChecked", estadoChecked);
console.log("e.target.checked", e.target.checked);
console.log("e.target.value", e.target.value);
console.log("e.target.name", e.target.name);
};

useEffect(() => {
fetchData();
console.log("useEffect", api_subjects);
console.log("useEffect dataApi", dataApi);
}, []);

return (


Filtrar por:

Promocionada


Pendiente


Cursando


Tiene apuntes

[list]
{dataApi.map((subject) => {
return (
[*]


{subject.estado}

[h4]{subject.nombre}[/h4]
{!subject.tiene_apuntes ? (

Código: {subject.codigo}

) : subject.tiene_apuntes &&  subject.link_apuntes ? (

Código: {subject.codigo}

[url={`${basePath}${subject.link_apuntes}`}
target=]
📚 Apuntes
[/url]


) : null}

);
})}
[/list]


);
};

Спасибо за ваше время!

Подробнее здесь: https://stackoverflow.com/questions/796 ... with-react