У меня есть переключатель с четырьмя вариантами выбора:
- Все
- Ежедневно
- Еженедельно
- Ежемесячно
Если пользователь выбирает все, тогда должны отображаться все задачи. Если выбрано ежедневное, то должны отображаться только ежедневные задания и т.д. c ..
My Json выглядит примерно так:
{
"title": "Bang",
"tasks": [
{
"type": "DAILY",
"list": [
{
"id": "1",
"task": "A"
},
{
"id": "2",
"task": "B"
}
]
},
{
"type": "WEEKLY",
"list": [
{
"id": "3",
"task": "JAA"
},
{
"id": "4",
"task": "BAA"
},
{
"id": "5",
"task": "YAA"
},
{
"id": "6",
"task": "PAA"
},
{
"id": "7",
"task": "ZAA"
}
]
},
{
"type": "MONTHLY",
"list": [
{
"id": "8",
"task": "DRAGON"
}
]
}
]
}
json импорт файла
import content from "../../assets/json/example.json";
У меня есть функция, которая возвращает список задач, используя карту. (ежедневно, еженедельно, ежемесячно)
const filterTasks = (taskType: string) => {
let tasks = content.tasks.map(task => {
if (task.type === taskType) {
console.log(task.list)
return task.list
}
});
};
Вот как я показываю все задания в атм
{content.tasks.map((task, i) => {
return (
<div className="example">
{task.list.map(function(element, i) {
return (
<div key={i}>
<Task
taskName={element.task}
taskId={element.id}
/>
</div>
);
})}
</div>
);
})}
Любые советы были бы хорошими ..