Как отрендерить задачу только в нужной категории-компоненте?

Question

Есть два стейта:

const [toDoList, setToDoList] = useState([]);
const [tasks, setTasks] = useState([]);

И код:

<ul className={styles.list}>
  {toDoList.map(({ categoryName, color, id }) => (
    <CategoryContainer
      title={categoryName}
      titleColor={color}
      key={id}
      openCreateTaskForm={openCreateTaskForm}
      isCreateTaskFormOpen={isCreateTaskFormOpen}
      createTask={createTask}
      cancelCreateTask={cancelCreateTask}
      openCategoryNameForm={openCategoryNameForm}
      isCategoryNameFormOpen={isCategoryNameFormOpen}
      onSaveEditCategoryName={onSaveEditCategoryName}
      onCancelEditCategoryName={onCancelEditCategoryName}
      tasks={tasks}
    >

    {
    tasks.map(({task, id, isDone}) => (
      <Task key={id} id={id}>{task}</Task>
    ))
    }

    </CategoryContainer>
  ))}
</ul>

Проблема: При добавлении задачи в одну категорию, сама задача появляется во всех категориях. Как сделать так чтобы задача добавлялась только в категорию где она была создана?

Answer 1

При создании таски не плохо было бы указывать id категории в которой она создавалась, а затем просто сравнивать при переборе условие вроде idCategory===id && <Task ...>

Answer 2

Я понимаю суть вашей мысли, но не понимаю как это реализовать.

Таска создается этой функцией:

В компоненте формы новой таски

  function handleSubmit(e) {
    e.preventDefault();
    onSaveCreateTask({
      task:inputValue,
      isDone: false,
      id: uuid(),
    });
  }

Стейт тасков обновляется так:

function createTask(inputValue) {
    setTasks((prevState) => [...prevState, inputValue]);
  }

Непонятные моменты:

Каким образом я могу определить категорию в которой была создана таска?
Если определяю категорию в которой была создана задача, то в объект задачи надо добавить id категории?

БЛОГ НА HUSL

Как отрендерить задачу только в нужной категории-компоненте?

Ответы (2 шт):