AntD Tables and Input fields per Card - reactjs

Question

I have a cards with tables inside but once an edit button is clicked, some of the columns of the tables will be input fields.
But I'm having a problem with my code. I'm getting same value from input change of the field.
Here's my code
EditableTable.js
function EditableTable({
columns,
dataSource,
pagination = false,
hasEdit = false,
renderColumn,
}) {
const footer = () => (
<table>
<thead className="ant-table-thead">
<tr>
<td colSpan="1" className="ant-table-cell">
<span>Total</span>
</td>
</tr>
</thead>
</table>
);
const tableColumns = () => {
if (hasEdit) {
return columns.map(column => {
if (column.hasFields) {
return {
title: column.title,
dataIndex: column.dataIndex,
key: column.key,
render: (text, record, index) =>
renderColumn(text, record, index, column.key),
};
}
return column;
});
}
return columns;
};
return (
<div>
<Table
columns={tableColumns()}
dataSource={dataSource}
pagination={pagination}
footer={footer}
/>
</div>
);
}
Here's where I call my component
const [formFields, setFormFields] = useState({
targets: ['', ''],
achievements: ['', ''],
ratings: ['', ''],
});
const dataSource = [
{
key: 0,
title: 'I. Operational Excellence',
hasEdit: true,
listing: [
{
key: '0',
competency: 'Edward King 0',
target: '',
achievement: '',
weight: '',
rating: '',
remarks: '',
score: '',
},
{
key: '1',
competency: 'Edward King 1',
target: '',
achievement: '',
weight: '',
rating: '',
remarks: '',
score: '',
},
],
},
{
key: 1,
title: 'II. Financial Contribution',
hasEdit: true,
listing: [
{
key: '0',
competency: 'Edward King 0',
target: '',
achievement: '',
weight: '',
rating: '',
remarks: '',
score: '',
},
{
key: '1',
competency: 'Edward King 1',
target: '',
achievement: '',
weight: '',
rating: '',
remarks: '',
score: '',
},
],
},
];
const handleChange = (e, key, index) => {
const fields = formFields;
fields[`${key}s`][index] = e.target.value;
setFormFields({ ...fields });
};
const renderColumn = (text, record, index, key) => {
if (isEdit) {
return (
<Form.Item>
{getFieldDecorator(`${key}-${index}`, {
rules: [
{
required: true,
},
],
})(
<Input
placeholder="Input text"
onChange={e => handleChange(e, key, index)}
/>,
)}
</Form.Item>
);
}
return formFields.targets && formFields.targets[index];
};
{ dataSource.map(item => (
<Card key={item.key} className="datatable" title={item.title}>
<Form onSubmit={handleSave}>
<EditableTable
hasEdit={item.hasEdit}
dataSource={item.listing}
columns={columns}
renderColumn={(text, record, index, key) =>
renderColumn(text, record, index, key)
}
/>
</Form>
</Card>
))}

Answer 1

You have to adapt your dataSource if you want to persist the changes.
Just have a look at the example in Antd Table docs. The depending Codesandbox has a full featured running version.
Code from the CodeSandbox to handle an input change:
handleSave = row => {
const newData = [...this.state.dataSource];
const index = newData.findIndex(item => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, { ...item, ...row });
this.setState({
dataSource: newData,
});
};