Reactjs – How to change Start time and End time in React?

Perhaps you are looking for something like this? If not, please clarify your question for me. I have just updated your handleAddRow function to always add one hour (you can modify it by changing the +2 from the following line: lastEndTime.setHours(lastEndTime.getHours() + 2);). The entire code looks like this:

import React, { useState } from 'react';

const TimeInputRow = ({ data, onFieldChange, onAddRow }) => {
  const { date, startTime, endTime, name, address } = data;

  return (
    <div>
      <input
        type="date"
        value={date}
        onChange={(e) => onFieldChange('date', e.target.value)}
      />
      <input
        type="text"
        pattern="[0-2][0-9]:[0-5][0-9]:[0-5][0-9]"
        value={startTime}
        onChange={(e) => onFieldChange('startTime', e.target.value)}
      />
      <input
        type="text"
        pattern="[0-2][0-9]:[0-5][0-9]:[0-5][0-9]"
        value={endTime}
        onChange={(e) => onFieldChange('endTime', e.target.value)}
      />
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => onFieldChange('name', e.target.value)}
      />
      <input
        type="text"
        placeholder="Address"
        value={address}
        onChange={(e) => onFieldChange('address', e.target.value)}
      />
      <button onClick={onAddRow}>Add Row</button>
    </div>
  );
};

const Apdemo = () => {
  const [rows, setRows] = useState([
    {
      date: '2023-01-01',
      startTime: '00:00:00',
      endTime: '00:00:00',
      name: 'John Doe',
      address: '123 Main St',
    },
  ]);

  const handleFieldChange = (index, field, value) => {
    const newRows = [...rows];
    newRows[index][field] = value;
    setRows(newRows);
  };

  const handleAddRow = async () => {
    const lastIndex = rows.length - 1;
    const lastRow = rows[lastIndex];

    // Parse the end time of the last row
    const lastEndTime = new Date(`2023-01-01 ${lastRow.endTime}`);

    // Add 10 hours to the end time
    lastEndTime.setHours(lastEndTime.getHours() + 2);

    const rowsInput = {
      date: addOneDay(lastRow.date),
      startTime: formatTime(lastEndTime),
      endTime: formatTime(lastEndTime),
      name: 'John Doe',
      address: '123 Main St',
    };

    setRows([...rows, rowsInput]);
  };

  const addOneDay = (date) => {
    const currentDate = new Date(date);
    const nextDay = new Date(currentDate);
    nextDay.setDate(currentDate.getDate() + 1);
    return nextDay.toISOString().split('T')[0];
  };

  const formatTime = (time) => {
    return time.toISOString().split('T')[1].slice(0, 8);
  };

  return (
    <div>
      {rows.map((data, index) => (
        <TimeInputRow
          key={index}
          data={data}
          onFieldChange={(field, value) =>
            handleFieldChange(index, field, value)
          }
          onAddRow={handleAddRow}
        />
      ))}
    </div>
  );
};

export default Apdemo;