How do you use popconfirm in an antd react table? - reactjs

Question

I have a reactjs component which displays an antd table of which one of the columns is to execute an action to archive the item in the row. If someone clicks on Archive I want it to show a popconfirm with yes/no confirmation before it moves forward and archives the item.
Everything works fine until I add the Popconfirm block. Then I get the below error. I think that there is something wrong with my usage of onconfirm and oncancel in the popconfirm but i'm just not getting something probably obvious here. Appreciate any feedback!
import React, { Component } from 'react';
import { connect } from 'react-redux';
import selectProperties from '../selectors/properties';
import { Table, Tag, Divider, Popconfirm, message } from 'antd';
export class PropertyList extends React.Component {
constructor(){
super();
this.columns = [
{
title: 'Address',
dataIndex: 'street',
key: 'street',
render: text => <a>{text}</a>,
},
{
title: 'City',
dataIndex: 'city',
key: 'city',
},
{
title: 'State',
dataIndex: 'state',
key: 'state',
},
{
title: 'Workflow',
key: 'workflow',
dataIndex: 'workflow',
sorter: (a, b) => a.workflow.length - b.workflow.length,
sortDirections: ['descend'],
render: workflow => {
let color = 'geekblue';
if (workflow === 'Inspection' || workflow === 'Maintenance' || workflow === 'Cleaning') {
color = 'volcano';
}
else if (workflow === 'Rented') {
color = 'green';
}
return (
<span>
<Tag color={color} key={workflow}>
{workflow.toUpperCase()}
</Tag>
</span>
);
},
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a>Edit</a>
<Divider type="vertical" />
<Popconfirm
title="Are you sure?"
onConfirm={this.confirm(record)}
onCancel={this.cancel}
okText="Yes"
cancelText="No"
>
Archive
</Popconfirm>
</span>
),
},
];
}
confirm = (record) => {
message.success('Archived');
console.log("confirm function.. record");
console.log(record);
}
cancel = () => {
message.error('Cancelled');
}
render() {
console.log("PropertyList render");
console.log(this.props);
console.log(this.props.properties);
console.log(this.columns);
return (
<div className="content-container">
<div className="list-body">
{
this.props.properties.length === 0 ? (
<div className="list-item list-item--message">
<span>No properties. Add some!</span>
</div>
) : (
<Table
rowKey="id"
dataSource={this.props.properties}
columns={this.columns}
pagination = { false }
footer={() => ''}
/>
)
}
</div>
</div>
)
}
};
const mapStateToProps = (state) => {
console.log("PropertyList mapStateToProps..");
console.log(state);
return {
properties: selectProperties(state.properties, state.filters)
};
};
const mapDispatchToProps = (dispatch) => ({
updateProperty: (id, property) => dispatch(editProperty(id, property))
});
export default connect(mapStateToProps, mapDispatchToProps)(PropertyList);

Answer 1

you are invoking the method confirm (in onConfirm) immediately when it renders the Table rows.
Change:
onConfirm={this.confirm(record)}
To:
onConfirm={() => this.confirm(record)}