How to write an onChange function in this case?

by

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;

92 thoughts on “How to write an onChange function in this case?”