When I clicked on the element I wanted to delete, the result I wanted was not printed. The key for my current element was not printed, only the keys for the previous elements were printed
And I deleted all the elements that I clicked on and after, oh my god
import { useState } from 'react';
const UtilsGetID = () => {
return Math.random().toString().slice(-8);
};
const Demo = () => {
const handleDel = (e) => {
e.stopPropagation();
e.preventDefault();
const key = e.target.dataset.key;
const index = dataList.findIndex((item) => {
console.log('item.key----', item.key, key);
return item.key === key;
});
console.log('index----', index);
if (index > -1) {
const item = dataList.splice(index, 1);
console.log('item----', item);
}
setDataList([...dataList]);
};
const id = UtilsGetID();
const [dataList, setDataList] = useState([
<div key={id} data-key={id} onClick={(e) => handleDel(e)}>
xxx,{id}
</div>,
]);
const addCard = () => {
const id = UtilsGetID();
setDataList([
...dataList,
<div key={id} data-key={id} onClick={(e) => handleDel(e)}>
xxx,{id}
</div>,
]);
};
return (
<>
<button onClick={() => addCard()}>addNewEle</button>
{dataList.map((item) => {
return item;
})}
</>
);
};
export default Demo;
How to delete only the elements that I have clicked on, like Todolist
2
Answers
Try this out
i have updated the handleDel function "its easy to use filter function for removing element from array",
Let me know if this is good
Thank You
code Problem
problem solving
dataList
in the state as shown in the code above.filter method