I’m working on React app using Ant-Design UI library. I am trying to prefill the date and time pickers with data received from backend so users can change the dates/time and make an API call to update. I used the form.setFieldsValue inside useEffect to set the date and time picker values with form passed as dependency into the useEffect. I noticed that the date picker were blinking as a result it was difficult to select date/time. On the other hand, I removed the dependency array and the form fields were not prefilled with data.
useEffect(() => {
const data = openHours?.data?.data;
form.setFieldsValue({
firsTermFrom:
openHours?.data?.data?.firstTerm?.from &&
moment(openHours?.data?.data?.firstTerm?.from, dateFormat).isValid()
? moment(openHours?.data?.data?.firstTerm?.from, dateFormat)
: "",
firstTermTo:
openHours?.data?.data?.firstTerm?.to &&
moment(data?.firstTerm?.to, dateFormat).isValid()
? moment(openHours?.data?.data?.firstTerm?.to, dateFormat)
: "",
secondTermFrom:
openHours?.data?.data?.secondTerm?.from &&
moment(data?.secondTerm?.from, dateFormat).isValid()
? moment(openHours?.data?.data?.secondTerm?.from, dateFormat)
: "",
secondTermTo:
openHours?.data?.data?.secondTerm?.to &&
moment(data?.secondTerm?.to, dateFormat).isValid()
? moment(openHours?.data?.data?.secondTerm?.to, dateFormat)
: "",
thirdTermFrom:
openHours?.data?.data?.thirdTerm?.from &&
moment(data?.thirdTerm?.from, dateFormat).isValid()
? moment(openHours?.data?.data?.thirdTerm?.from, dateFormat)
: "",
thirdTermTo:
openHours?.data?.data?.thirdTerm?.to &&
moment(data?.thirdTerm?.to, dateFormat).isValid()
? moment(openHours?.data?.data?.thirdTerm?.to, dateFormat)
: "",
studentStart:
openHours?.data?.data?.studentsNewResumptionTime !== "Invalid date" &&
openHours?.data?.data?.studentsNewResumptionTime !== null &&
moment(data?.studentsNewResumptionTime, "h:mm:ss a").isValid()
? moment(
openHours?.data?.data?.studentsNewResumptionTime,
"h:mm:ss a"
) : "",
studentEnd:
openHours?.data?.data?.studentNewClosingTime !== "Invalid date" &&
openHours?.data?.data?.studentNewClosingTime !== null &&
moment(data?.studentNewClosingTime, "h:mm:ss a").isValid()
? moment(openHours?.data?.data?.studentNewClosingTime, "h:mm:ss a")
: "",
superStart:
openHours?.data?.data?.supervisorNewResumptionTime !== "Invalid date" &&
openHours?.data?.data?.supervisorNewResumptionTime !== null &&
moment(data?.supervisorNewResumptionTime, "h:mm:ss a").isValid()
? moment(
openHours?.data?.data?.supervisorNewResumptionTime,
"h:mm:ss a"
) : "",
superEnd:
openHours?.data?.data?.supervisorNewClosingTime &&
openHours?.data?.data?.supervisorNewClosingTime !== "Invalid date" &&
openHours?.data?.data?.supervisorNewClosingTime !== null &&
moment(data?.supervisorNewClosingTime, "h:mm:ss a").isValid()
? moment(openHours?.data?.data?.supervisorNewClosingTime, "h:mm:ss a")
: "",
});
}, []);
<Form
className="openHrs w-2/3"
form={form}
title="open-hours"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<div className="">
<span
className="text-lg font-extrabold"
title="openhrs"
data-testid="openhrs-title"
>
Open hours
</span>
</div>
{/* SESSION */}
<div className="mt-7 mb-3 flex flex-col items-baseline">
<div className="mb-7 w-60">
<span className="student font-InterMedium text-base font-medium tracking-widest text-arshGrey opacity-100">
SESSION
</span>
</div>
</div>
{/* TERMS */}
<div className="flex flex-col space-y-3">
{/* 1ST TERM*/}
<div className="mt-2 mb-1 flex flex-row items-baseline space-x-12">
<div className="mb-7 w-1/4">
<span className="font-InterMedium text-base font-medium">
First term
</span>
</div>
{/* RESUMPTION TIME */}
<div className="flex w-3/4 flex-row items-center space-x-2">
<Form.Item
name={"firsTermFrom"}
rules={[
{
required: true,
message: "Please input first term start date",
},
]}
>
<DatePicker
picker="date"
className="openInput outline-0 w-52 rounded border-0 bg-inputBg px-10 py-3 font-InterMedium opacity-100 shadow-none"
placeholder="Start date"
format={dateFormat}
size={"large"}
data-testid="first-term-from"
/>
</Form.Item>
<Form.Item
name={"firstTermTo"}
rules={[
{
required: true,
message: "Please input second term start date",
},
]}
>
<DatePicker
picker="date"
className="openInput outline-0 w-52 rounded border-0 bg-inputBg px-10 py-3 font-InterMedium opacity-100 shadow-none"
placeholder="End date"
format={dateFormat}
size={"large"}
/>
</Form.Item>
</div>
</div>
{/* 2ND TERM */}
<div className="mb-3 flex flex-row items-baseline space-x-12">
<div className="mb-7 w-1/4">
<span className="schName font-InterMedium text-base font-medium">
Second term
</span>
</div>
{/* RESUMPTION TIME */}
<div className="flex w-3/4 flex-row items-baseline space-x-2">
<Form.Item
name={"secondTermFrom"}
rules={[
{
required: true,
message: "Please input second term start date",
},
]}
>
<DatePicker
picker="date"
className="openInput outline-0 w-52 rounded border-0 bg-inputBg px-10 py-3 font-InterMedium opacity-100 shadow-none"
placeholder="Start date"
format={dateFormat}
size={"large"}
/>
</Form.Item>
<Form.Item
name={"secondTermTo"}
rules={[
{
required: true,
message: "Please input second term end date",
},
]}
>
<DatePicker
picker="date"
className="openInput outline-0 w-52 rounded border-0 bg-inputBg px-10 py-3 font-InterMedium opacity-100 shadow-none"
placeholder="End date"
format={dateFormat}
size={"large"}
/>
</Form.Item>
</div>
</div>
{/* 3RD TERM */}
<div className="mb-3 flex flex-row items-baseline space-x-12">
<div className="mb-7 w-1/4">
<span className="schName font-InterMedium text-base font-medium">
Third term
</span>
</div>
{/* RESUMPTION TIME */}
<div className="flex w-3/4 flex-row items-center space-x-2">
<Form.Item
name={"thirdTermFrom"}
rules={[
{
required: true,
message: "Please input third term start date",
},
]}
>
<DatePicker
picker="date"
className="openInput outline-0 w-52 rounded border-0 bg-inputBg px-10 py-3 font-InterMedium opacity-100 shadow-none"
placeholder="Start date"
format={dateFormat}
size={"large"}
/>
</Form.Item>
<Form.Item
name={"thirdTermTo"}
rules={[
{
required: true,
message: "Please input third term end date",
},
]}
>
<DatePicker
picker="date"
className="openInput outline-0 w-52 rounded border-0 bg-inputBg px-10 py-3 font-InterMedium opacity-100 shadow-none"
placeholder="Start date"
format={dateFormat}
size={"large"}
/>
</Form.Item>
</div>
</div>
</div>
{/* HORIZONTAL RULE */}
<hr className="mt-7 w-5/6 p-1" />
{/* STUDENT */}
<div className="mt-7 mb-3 flex flex-col items-baseline">
<div className="mb-7 w-60">
<span className="student font-InterMedium text-base font-medium tracking-widest text-arshGrey opacity-100">
STUDENT
</span>
</div>
</div>
{/* STUDENT TIMES */}
<div className="flex flex-col">
{/* RESUMPTION */}
<div className="mt-2 mb-1 flex flex-row items-baseline space-x-12">
<div className="mb-7 w-1/4">
<span className="font-InterMedium text-base font-medium">
Resumption time
</span>
</div>
{/* RESUMPTION TIME */}
<Form.Item
className="w-3/4"
name={"studentStart"}
rules={[
{
required: true,
message: "Please input student resumption time",
},
]}
>
<TimePicker
use12Hours
format="h:mm:ss a"
className="openInput outline-0 focus:outline-none h-12 w-2/3 rounded border-0 bg-inputBg px-10 py-5 font-InterMedium opacity-100 shadow-none placeholder:font-InterMedium"
placeholder="Resumption time"
size={"large"}
/>
</Form.Item>
</div>
{/* CLOSING */}
<div className="mb-3 flex flex-row items-baseline space-x-12">
<div className="mb-7 w-1/4">
<span className="schName font-InterMedium text-base font-medium">
Closing time
</span>
</div>
{/* RESUMPTION TIME */}
<Form.Item
className="w-3/4"
name={"studentEnd"}
rules={[
{
required: true,
message: "Please input student closing time",
},
]}
>
<TimePicker
use12Hours
format="h:mm:ss a"
className="openInput outline-0 focus:outline-none h-12 w-2/3 rounded border-0 bg-inputBg px-10 py-5 font-InterMedium opacity-100 shadow-none placeholder:font-InterMedium"
placeholder="Closing time"
size={"large"}
/>
</Form.Item>
</div>
</div>
{/* HORIZONTAL RULE */}
<hr className="w-5/6 p-1" />
{/* TEACHERS */}
<div className="mt-4 mb-3 flex flex-col items-baseline">
<div className="mb-4 w-60">
<span className="font-InterMedium text-base font-medium tracking-widest text-arshGrey opacity-100">
TEACHERS
</span>
</div>
</div>
{/* TEACHERS RESUMPTION TIME */}
<div className="flex flex-col">
{/* RESUMPTION */}
<div className="mt-2 mb-1 flex flex-row items-baseline space-x-12">
<div className="mb-7 w-1/4">
<span className="schName font-InterMedium text-base font-medium">
Resumption time
</span>
</div>
{/* RESUMPTION TIME */}
<Form.Item
className="w-3/4"
name={"superStart"}
rules={[
{
required: true,
message: "Please input teacher resumption time",
},
]}
>
<TimePicker
use12Hours
format="h:mm:ss a"
className="openInput outline-0 focus:outline-none h-12 w-2/3 rounded border-0 bg-inputBg px-10 py-5 font-InterMedium opacity-100 shadow-none placeholder:font-InterMedium"
placeholder="Resumption time"
size={"large"}
name="resumptionTime"
/>
</Form.Item>
</div>
{/* CLOSING */}
<div className="mb-3 flex flex-row items-baseline space-x-12">
<div className="mb-7 w-1/4">
<span className="schName font-InterMedium text-base font-medium">
Closing time
</span>
</div>
{/* RESUMPTION TIME */}
<Form.Item
className="w-3/4"
name={"superEnd"}
rules={[
{
required: true,
message: "Please input teacher closing time",
},
]}
>
<TimePicker
use12Hours
format="h:mm:ss a"
className="openInput outline-0 focus:outline-none h-12 w-2/3 rounded border-0 bg-inputBg px-10 py-5 font-InterMedium opacity-100 shadow-none placeholder:font-InterMedium"
placeholder="Closing time"
size={"large"}
/>
</Form.Item>
</div>
<Button
className="save float-right h-8 w-auto cursor-pointer place-self-end rounded border border-solid border-regularGreen bg-regularGreen font-InterBold font-medium text-regularWhite opacity-100"
htmlType="submit"
size="middle"
loading={loading}
>
{openHrsId === undefined || "" ? "CREATE" : "EDIT"}{" "}
</Button>
</div>
{/* SAVE */}
<div className="text-end w-full pb-7 text-right"></div>
</Form>