Суть в том, что я пытаюсь реализовать добавление/удаление элементов, добавление успешно выполнено, но с удалением некоторые трудности, ибо в функцию 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>
))}
</>
);
};