I have a functional component named Timesheet.js. It looks like this:
In this Timesheet.js, my data looks like this. The nested ‘days’ is the data for the editable table here.
const data = {
"id": {
"timestamp": 1613185134,
"date": "2021-02-13T02:58:54.000+00:00"
},
"employeeId": 1,
"days": [
{
"date": "02/07/2021",
"day": "sunday",
"start_time": "00:00",
"end_time": "00:00",
"total_hours": 8,
"absent": ""
},
{
"date": "02/08/2021",
"day": "monday",
"start_time": "00:00",
"end_time": "00:00",
"total_hours": 8,
"absent": "floating"
},
{
"date": "02/09/2021",
"day": "tuesday",
"start_time": "00:00",
"end_time": "00:00",
"total_hours": 8,
"absent": ""
},
{
"date": "02/10/2021",
"day": "wednesday",
"start_time": "00:00",
"end_time": "00:00",
"total_hours": 8,
"absent": ""
},
{
"date": "02/11/2021",
"day": "thursday",
"start_time": "00:00",
"end_time": "00:00",
"total_hours": 8,
"absent": ""
},
{
"date": "02/12/2021",
"day": "friday",
"start_time": "00:00",
"end_time": "00:00",
"total_hours": 8,
"absent": "holiday"
},
{
"date": "02/13/2021",
"day": "saturday",
"start_time": "00:00",
"end_time": "00:00",
"total_hours": 8,
"absent": ""
}
],
"totalBillingHours": 24,
"totalCompensatedHours": 40,
"comment": "1 floating day and 1 holiday",
"submissionStatus": "Not Started",
"timesheetFile": ""
};
The function I want is when I change the values in this table, for example "starting time" here, it will call onChange function and update my data. But it does not work. Can anyone tell me how to fix it? Thanks!!!
My code is like the following:
import { useEffect, useState } from "react";
import moment from "moment"
import {Button, Space} from 'antd';
import { Row, Col, Input, Table, TimePicker, Checkbox, Select} from 'antd';
const Option = Select.Option;
function Timesheet(props) {
const data = {...my data like above...};
const [days, setDays] = useState(data.days);
const columns = [
{
title: 'Day',
dataIndex: 'day',
key: 'day',
},
{
title: 'Date',
dataIndex: 'date',
key: 'date',
},
{
title: 'Starting Time',
dataIndex: 'startTime',
key: 'start_time',
render: (text, recode) => <TimePicker value = {moment(recode.start_time, 'HH:mm')}
format="HH:mm"
onChange ={(e, text) => {
// 1. compare whether this item is changed or not, if it is changed, set the new value
if (text != "") {
recode.start_time = text
} else {
recode.start_time = "00:00"
}
// 2. Call setDays here, and loop every items in days to update its value
setDays({days : days.map((item) => {
if(item.date == recode.date) {
return recode;
} else {
return item;
}
})})
}}/>,
},
...Other columns...
]
return (
<div>
<br/>
<Row>
<Col span={8} >
Week Ending : <Input disabled bordered={false} value = {data.days[0]['date']} />
</Col>
<Col span={8}>
totalBillingHours : <Input disabled bordered={false} value = {data.totalBillingHours} />
</Col>
<Col span={8} >
totalCompensatedHours : <Input disabled bordered={false} value = {data.totalCompensatedHours} />
</Col>
</Row>
<br/>
<Table rowKey="date" pagination={false} dataSource={data.days} columns={columns}/>
<br/>
<br/>
<Row>
<Col span={19}></Col>
<Col span={4}>
<Button style={{ width: 160 }} size={"large"} type="primary">Save</Button>
</Col>
</Row>
</div>
);
}
export default Timesheet;
You have to add your data in state and update the state in onChange.
Just Replace
with