I'm trying to make a function to delete the "clicked" task but I can't figure out what is the problem.
Any idea what I'm doing wrong?
Thank you in advance!!
const { useState } = React;
function Todo() {
const [item, setItem] = useState("");
const [itemArray, setItemArray] = useState([]);
function addItem() {
setItemArray((prev) => {
return [...prev, item];
});
setItem("");
}
function handleChange(event) {
const { value } = event.target;
setItem(value);
}
function deleteTask(key) {
const newItemArray = itemArray.filter((task) => task.key != key);
console.log(newItemArray);
console.log(key);
setItemArray(newItemArray);
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input type="text" onChange={handleChange} value={item} />
<button onClick={addItem}>Add</button>
</div>
<div>
<ul>
{itemArray.map((task, i) => {
return (
<li key={i}>
{task}
<button
key={i}
onClick={() => deleteTask(i)}
className="">Borrar
</button>
</li>
);
})}
</ul>
</div>
</div>
);
}
ReactDOM.render(
<Todo />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>You are looking for a key property when filtering your array on the deleteTask function. You should instead compare the selected task to the index of your current element.
const newItemArray = itemArray.filter((task, index) => index != key);
When you add item, you didn't set key to item and you just add string in state and when you want to filter items, your key is undefiend
In following line, task does not contain key property
const newItemArray = itemArray.filter((task) => task.key != key);
You need to store key in task.