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
Try this out
"import { useState } from 'react';
const UtilsGetID = () => {
return Math.random().toString().slice(-8);
};
const Demo = () => {
const handleDel = (key) => {
// Create a new array without the item to be deleted
setDataList(prevList => prevList.filter((_, index) => index !== key));
};
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, index) => (
<div key={index} onClick={() => handleDel(index)}>
{item},{index}
</div>
))}
</>
);
};
export default Demo;"
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
2
code Problem
- Keep the state as pure data.
- Handle dataList as an object or array in the state, instead of JSX.
problem solving
const [dataList, setDataList] = useState([
<div key={id} data-key={id} onClick={(e) => handleDel(e)}>
xxx,{id}
</div>,
]);
const [dataList, setDataList] = useState([{ id: UtilsGetID(), content: "xxx" },]);
const handleDel = (e) => {
e.stopPropagation();
e.preventDefault();
const key = e.target.dataset.key;
const index = dataList.findIndex((item) => {
return item.key === key;
});
if (index > -1) {
const item = dataList.splice(index, 1);
console.log('item----', item);
}
setDataList([...dataList]);
const handleDel = (e, id) => {
e.stopPropagation();
e.preventDefault();
setDataList(dataList.filter((item) => item.id !== id));
};
- Manage
dataListin the state as shown in the code above. - Handle it using the
filter method