Add a functionality in ant table - reactjs

Question

In my application i use ant design. I want to add the delete row functionality in my table, but a came across some problems with the implementation. I want to add delete functionality functionality, but i can't do this because i can't render 2 render in
{
title: "operation",
dataIndex: "operation",
render: (text, record) => { //first render
const editable = isEditing(record);
return editable ? (
<span>
<a
href="javascript:;"
onClick={() => save(record.key)}
style={{ marginRight: 8 }}
>
Save
</a>
<Popconfirm
title="Sure to cancel?"
onConfirm={() => cancel(record.key)}
>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<a disabled={editingKey !== ""} onClick={() => edit(record)}>
Edit
</a>
),
}
render: (text, record) => //second render
data.length >= 1 ? (
<Popconfirm
title="Sure to delete?"
onConfirm={() => handleDelete(record.key)}
>
<a>Delete</a>
</Popconfirm>
) : null
},
and i get Duplicate declaration. How to add delete functionality in my app and which is the problem?

Answer 1

It seems that there is an error in setting data, in handleDeleteMethod
Change your handleDeleteMethod as follows
const handleDelete = key => {
setData(data.filter(item => item.key !== key));
};
When you are using hooks, you need to pass the resultant new state that need to be set as a parameter, not the object like we use in setState method
Please feel free to ask doubts if any
EDIT :
For edit to work change the render as follows
render: (text, record) => {
const editable = isEditing(record);
return editable ? (
<span>
<a
href="javascript:;"
onClick={() => save(record.key)}
style={{ marginRight: 8 }}
>
Save
</a>
<Popconfirm
title="Sure to cancel?"
onConfirm={() => cancel(record.key)}
>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<>
<a disabled={editingKey !== ""} onClick={() => edit(record)}>
Edit
</a>
<Popconfirm
title="Sure to delete?"
onConfirm={() => handleDelete(record.key)}
>
<a>Delete</a>
</Popconfirm>
</>
);
}