Yazdun
how we can set a data on Edit.
How we can set the GET API data into the input component? When we implement your example and try to edit the data.
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<FeatureFlagState>({ 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]);
