Increase The Next Value By A Certain Number In Relation To The First Value

I have an application where user can set the time for each generated fields. const [firstTime, setFirstTime] = useState({}); const [secondTime, setSecondTime] = useState({});

Solution 1:

First of all,we don't see any code here which keeps a track of your un-changed value. Also, you are adding the 5 minutes on the fly but not keeping a record of it.

To solve this, let us do all this just before you call add:

 <Button
     type="dashed"
     onClick={() => {
                const length = Object.keys(firstTime).length;
                if (length > 0) {
                  const newTime = moment(
                    secondTime[length - 1],
                    "HH mm"
                  )
                  const newSecTime = moment(
                    secondTime[length - 1],
                    "HH mm"
                  ).add(5, "minutes");
                  setFirstTime({ ...firstTime, [length]: newTime });
                  setSecondTime({ ...secondTime, [length]: newSecTime });
                } else {
                  setFirstTime({ ...firstTime, [length]: "07:00" });
                  setSecondTime({ ...secondTime, [length]: "10:00" });
                }
                add();
              }}
     block
     >
     <PlusOutlined /> Add field
     </Button>

Next lets make use of defaultValue prop of timepicker to display the value:

 <TimePicker
    defaultValue={moment(firstTime[index], "HH mm")}
    onChange={(date, dateString) =>
    onChange1(date, dateString, field.key)
     }
  />