How to write an onChange function in this case?

Viewed 86

I have a functional component named Timesheet.js. It looks like this:

Change Start time

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;
2 Answers

You have to add your data in state and update the state in onChange.

You are changing days state onChange of time but data provided to Table is data.days.

Just Replace

 <Table rowKey="date" pagination={false} dataSource={data.days} columns={columns}/>

with

 <Table rowKey="date" pagination={false} dataSource={days} columns={columns}/>
Related