0

Суть в том, что я пытаюсь реализовать добавление/удаление элементов, добавление успешно выполнено, но с удалением некоторые трудности, ибо в функцию deleteTask приходит id со значением undefined, пробовал и так и сяк, но никак не получается Сам код:

import { useState, React } from 'react';


const App = () => {

  const [inputValue, setInputValue] = useState("");
  const [tasks, setTasks] = useState([]);

  const changeInput = (e) => {
    setInputValue(e.target.value);
  };

  const addTask = () => {
    if(inputValue) {
    const newTask = {
      value: inputValue,
      id: Math.random(),
    };

    setTasks([...tasks, newTask]);
    setInputValue("");
  };
};

  const deleteTask = (id) => {
    setTasks([...tasks.filter((task) => task.id !== id)]);
  }

  const keyPressApp = (e) => {
    if(e.key === "Enter") {
      addTask(e);
    }
  };


  return (
    <div className="container mx-auto px-4 py-10 border-2 rounded border-solid border-black flex flex-col justify-center items-center relative w-2/4">
      <div className="space-x-2 w-3/4">
        <input
          type="text"
          placeholder="Add Task"
          value={inputValue}
          onChange={changeInput}
          onKeyDown={keyPressApp}
          className=" bg-gray-300 h-8 w-3/4 rounded border-solid border-black"
        />
        <button
          onClick={addTask}
          className="bg-gray-700 text-white px-3 h-8 w-16 rounded border-solid border-black"
        >
          Add
        </button>
      </div>
      <List 
        deleteTask={deleteTask}
        tasks={tasks} />
    </div>
  );
};

List:

import Task from './Task/Task';

const List = (props) => {
    return (
        <div className=' h-full block w-3/4 border-2 my-4 rounded border-dotted border-gray-400 bg-gray-100'>
            <Task 
                deleteTask={props.deleteTask} 
                tasks={props.tasks} />
        </div>
    )
}

Task:

const Task = (props) => {
    const tasks = props.tasks;

    const deleteTask = props.deleteTask

    return (
      <>
        {tasks.map(({ id, value }) => (
          <label
            key={id}
            className="inline-flex items-center mt-3 pl-2 space-x-2 w-full"
          >
            <input
              value={value}
              type="text"
              title="Add Task"
              className="h-8 w-3/4 border-2 rounded-md bg-gray-300 border-black"
            />
            <input
              type="checkbox"
              className="form-checkbox h-5 w-5 text-blue-600"
              unchecked
            />
            <span className="ml-2 text-gray-700">Done</span>
            <button onClick={() => deleteTask(tasks.id)}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-7 w-7 text-red-600"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </button>
          </label>
        ))}
      </>
    );
  };
2
  • А компонент List можно посмотреть? 5 авг 2021 в 9:14
  • Да, добавил компоненты
    – Matvey
    5 авг 2021 в 9:16

1 ответ 1

0
<button onClick={() => deleteTask(id)}>

просто id оставь

2
  • Вот ведь невнимательный я, спасибо за помощь!)
    – Matvey
    5 авг 2021 в 9:24
  • Да я сразу нажал стрелку вверх, у меня каких-то баллов не хватает чтобы оно отображалось
    – Matvey
    5 авг 2021 в 9:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.