Помощь с зачеркиванием task в todo list

Рейтинг: 1Ответов: 1Опубликовано: 02.03.2023

Делаю свой первый todo mini app:) Хочу что бы на нажатие по таску оно зачеркивалось, но почему-то зачеркиваются вообще все таски.

Реализую следующим образом:

  const [todoDone, setTodoDone] = useState(false)

  function handleTodoToggle () {
      !todoDone ? setTodoDone(true) : setTodoDone(false)
       }

  <h3 className={`card__title ${todoDone ? 'card__title-done' : ''}`}
   onClick={handleTodoToggle}>{entry}</h3>

Вот так выглядит рендер тасков:

        {props.todosCard.map((entry, id) => (
        <li key={id} className='card'>
          <h3
            className={`card__title ${todoDone ? 'card__title-done' : ''}`}
            onClick={handleTodoToggle}
          >
            {entry}
          </h3>
          <button
            className='card__delete'
            onClick={() => {
              props.handleDeleteTodo(entry)
            }}
          >
            <img className='card__img-del' src={del} alt='dellogo'></img>
          </button>
        </li>
      ))}
javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Как пример, вот так может выглядеть ваш компонет

При клике на кнопку, передаем индекс элемента, на котором произошло событие и по индексу меняем значение ключа status, который отвечает за состояние TODO элемента.

const App = () => {

  const [todosCard, setTodosCard] = useState([
    {
      title: "Выучить javaScript",
      status: true
    },
    {
      title: "Выучить react",
      status: true
    }
  ]);

  const handleTodoToggle = (id) => {
    const list = [...todosCard];
    list[id].status = !list[id].status;
    setTodosCard(list);
  };

  return (
    <>
      {todosCard.map((entry, id) => (
        <li key={id} className="card">
          <h3
            className={`card__title ${!entry.status ? "card__title-done" : ""}`}
            onClick={() => handleTodoToggle(id)}
          >
            {entry.title}
          </h3>
        </li>
      ))}
    </>
  );

}