Фильтрация списка по выбранному типу - реагирует на машинопись - PullRequest
0 голосов
/ 23 февраля 2020

У меня есть переключатель с четырьмя вариантами выбора:

  1. Все
  2. Ежедневно
  3. Еженедельно
  4. Ежемесячно

Если пользователь выбирает все, тогда должны отображаться все задачи. Если выбрано ежедневное, то должны отображаться только ежедневные задания и т.д. 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>
                );
              })}

Любые советы были бы хорошими ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...