React Ant Design editable table - mysql

Question

so I follow up this documentation for creating a editable row; It's a CSS library for React from Ant Design, I am stuck at the following:
How do I pass the changed row, the newData[index] to an onChange event?
How do I update a set of row of data to a back-end rest api? I managed to create data using form from Ant Design, but I don't know how to update it using editable row
Fyi, the back end works perfectly with postman: create, update, delete
How do I get the id of this code?
axios.put("/api/product/update/:id"
I tried to replace the id with ${id}, ${index}, ${products[index]} (with template literal) but it doesn't work.
Here are the full code:
import React from 'react';
import axios from 'axios';
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
const FormItem = Form.Item;
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props }) => (
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
);
const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
getInput = () => {
if (this.props.inputType === 'number') {
return <InputNumber />;
}
return <Input />;
};
render() {
const {
editing,
dataIndex,
title,
inputType,
record,
index,
...restProps
} = this.props;
return (
<EditableContext.Consumer>
{(form) => {
const { getFieldDecorator } = form;
return (
<td {...restProps}>
{editing ? (
<FormItem style={{ margin: 0 }}>
{getFieldDecorator(dataIndex, {
rules: [{
required: true,
message: `Please Input ${title}!`,
}],
initialValue: record[dataIndex],
})(this.getInput())}
</FormItem>
) : restProps.children}
</td>
);
}}
</EditableContext.Consumer>
);
}
}
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.state = { products: [], editingKey: '' };
this.columns = [
{
title: 'Product Name',
dataIndex: 'productname',
width: '25%',
editable: true,
},
{
title: 'OS',
dataIndex: 'os',
width: '10%',
editable: true,
},
{
title: 'Category',
dataIndex: 'category',
width: '15%',
editable: true,
},
{
title: 'Model',
dataIndex: 'model',
width: '20%',
editable: true,
},
{
title: 'Serial Number',
dataIndex: 'serialnumber',
width: '20%',
editable: true,
},
{
title: 'Operation',
dataIndex: 'operation',
width: '10%',
render: (text, record) => {
const editable = this.isEditing(record);
return (
<div>
{editable ? (
<span>
<EditableContext.Consumer>
{form => (
<a
href="javascript:;"
onClick={() => this.save(form, record.id)}
style={{ marginRight: 8 }}
>
Save
</a>
)}
</EditableContext.Consumer>
<Popconfirm
title="Sure to cancel?"
onConfirm={() => this.cancel(record.id)}
>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<a onClick={() => this.edit(record.id)}>Edit</a>
)}
</div>
);
},
},
];
}
handleCategoryChange = event => { this.setState({ category: event.target.value }) }
handleProductNameChange = event => { this.setState({ productname: event.target.value }) }
handleOsNameChange = event => { this.setState({ os: event.target.value }) }
handleModelchange = event => { this.setState({ model: event.target.value }) }
handleSerialnumberChange = event => { this.setState({ serialnumber: event.target.value }) }
handlePriceChange = event => { this.setState({ price: event.target.value }) }
handleEquipmentChange = event => { this.setState({ equipment_condition: event.target.value }) }
handleDetailChange = event => { this.setState({ detail: event.target.value }) }
handleImageChange = event => { this.setState({ image: event.target.value }) }
handleSubmit = event => {
event.preventDefault();
axios.put(`/api/product/update/:id`,
{
category: this.state.category,
productname: this.state.productname,
os: this.state.os,
serialnumber: this.state.serialnumber,
model: this.state.model,
price: this.state.price,
equipment_condition: this.state.equipment_condition,
detail: this.state.detail,
image: this.state.image
})
}
componentDidMount() {
axios.get('/api/product').then(res => {
this.setState({ products: res.data });
});
}
isEditing = (record) => {
return record.id === this.state.editingKey;
};
edit(id) {
console.log('products', this.state.products.id);
// console.log('recordid', record.id);
this.setState({ editingKey: id });
}
save(form, id) {
console.log('key', id)
form.validateFields((error, row) => {
if (error) {
return;
}
const newData = [...this.state.products];
const index = newData.findIndex(item => id === item.id);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, ...row, });
this.setState({ products: newData, editingKey: '' });
console.log('newData', newData[index]) // data I want to update to API
console.log('category', newData[index].category) // category
} else {
newData.push(this.state.products);
this.setState({ products: newData, editingKey: '' });
}
});
}
cancel = () => {
this.setState({ editingKey: '' });
};
render() {
const components = {
body: {
row: EditableFormRow,
cell: EditableCell,
},
};
const columns = this.columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
inputType: col.dataIndex === 'serialnumber' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: this.isEditing(record),
}),
};
});
return (
<Table
rowKey={this.state.id}
components={components}
bordered
dataSource={this.state.products}
columns={columns}
rowClassName="editable-row"
/>
);
}
}
export default EditableTable;
Update:
So I try put axios inside the save method, like so:
save(form, id) {
form.validateFields((error, row) => {
if (error) {
return;
}
const newData = [...this.state.products];
const index = newData.findIndex(item => id === item.id);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, ...row, });
this.setState({ products: newData, editingKey: '' });
console.log('newData', newData[index]) // data I want to update to API
console.log('index', index) // index adalah index array
console.log('id', id) // id adalah nomor index dalam tabel database, jangan sampai tertukar
console.log('category', newData[index].category)
console.log('productname', newData[index].productname)
console.log('os', newData[index].os)
console.log('serialnumber', newData[index].serialnumber)
console.log('model', newData[index].model)
console.log('detail', newData[index].detail)
axios.put(`/api/product/update/:${id}`,
{
category: newData[index].category,
productname: newData[index].productname,
os: newData[index].os,
serialnumber: newData[index].serialnumber,
model: newData[index].model,
price: newData[index].price,
equipment_condition: newData[index].equipment_condition,
detail: newData[index].detail,
image: newData[index].image
})
} else {
newData.push(this.state.products);
this.setState({ products: newData, editingKey: '' });
}
});
It doesn't update the data on the database.

Answer 1

Someone might still need this, The antd table api.
You can pass the render key in your column with one to three parameters depending on what you need
function(text, record, index) {}
The column will look like this:
const column = [{
dataIndex: "firstName",
render: (text, record, index) => console.log(text, record, index)
}]

Answer 2

So there's this weird syntax that I have to remove from the url api.
Pay attention to the very minor details of the url; I noticed it from the console log from the back end / node:
axios.put(`/api/product/update/${id}`,
{
category: newData[index].category,
productname: newData[index].productname,
os: newData[index].os,
serialnumber: newData[index].serialnumber,
model: newData[index].model,
price: newData[index].price,
equipment_condition: newData[index].equipment_condition,
detail: newData[index].detail,
image: newData[index].image
})