how we can set a data on Edit.

[tejastv]

How we can set the GET API data into the input component?
When we implement your example and try to edit the data.

[AyanUpadhaya]

How we can set the GET API data into the input component?
When we implement your example and try to edit the data.

In one of my projects I needed to add incoming data in edit form, so you can check this codes, may be this can help you. Note: it was in typescript

//pass incoming data to form
<EditFlagDiaLog
isOpen={isConfirmUpdateOpen}
onClose={() => setIsConfirmUpdateOpen(false)}
onUpdateFunction={handleConfirmUpdate}
title={Update ${flag.name}?}
description={Are you sure you want to update this?}
confirmText={"Update"}
data={flag}
/>

// in your update form component use useEffect to set data on mount
export default function EditFlagDialog({
isOpen,
onClose,
onUpdateFunction,
title,
description,
confirmText = "Update Flag",
cancelText = "Cancel",
isDestructive = false,
data,
}: EditFlagDialogProps) {
const {
register,
handleSubmit,
control,
reset,
formState: { errors, isSubmitting },
} = useForm({
defaultValues: {
name: "",
description: "",
rollout_note: "",
enabled: false,
project_id: undefined,
},
});

// Reset form when dialog opens
useEffect(() => {
if (isOpen && data) {
reset({
name: data.name || "",
description: data.description || "",
rollout_note: data.rollout_note || "",
enabled: Boolean(data.enabled),
project_id: data.project_id,
});
}
}, [isOpen, data, reset]);