Стейт не обновляется при toogle, а меняется всего один раз

Question

Стейт задач — массив с объектами:

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

Объекты задач в массиве такого плана:

   {
      catId: 'a8fc3d-b502-1e1-a167-42140181a1e8',
      id: '137c10e-0c03-fdf-231e-3185e1bdb1e',
      isDone: false,
      task: 'Найти решение',
    };

В компоненте checkbox инпут:

  function handleRadioInput() {
    markTaskDone(id);
  }

    <input
      className={styles.checkbox}
      type='checkbox'
      id={id}
      checked={isDone}
      onChange={handleRadioInput}
    />

При клике на чекбокс, я пытаюсь изменить стейт isDone по принципу toogle, но не работает. При клике на чекбокс стейт меняется на true, а при повторном клике уже ничего не меняется. Подскажите пожалуйста в чем у меня ошибка?

Стейт меняю этой функцией:

  function markTaskDone(id) {
    setTasks((prev) =>
      prev.map((item) => (item.id === id ? { ...item, isDone: !prev.isDone } : item))
    );
  }

Answer 1

Спасибо за решение @p1uton

Правильно было так:

  function markTaskDone(data) {
    console.log(data);
    const { id, checked } = data;
    setTasks((prev) => prev.map((item) => (item.id === id ? { ...item, isDone: !item.isDone } : item)));
  }

БЛОГ НА HUSL

Стейт не обновляется при toogle, а меняется всего один раз

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