I am trying to add an edit function with the existing create form using server actions in next js 14

Question

The problem arises when it says the type (id) parameter of the create form is null which does not match with prisma (edit info).

export function AboutForm({ id }: { id: number }) {
    const router = useRouter();
    const [err, setErr] = useState("");
    const [isPending, startTransition] = useTransition();
    const pending = useFormStatus();
    const formRef = useRef<HTMLFormElement>(null);
    const formRef2 = useRef<HTMLFormElement>(null);

    const formInfo = useForm<InputInfo>({
        resolver: zodResolver(infoSchema),
    });

    const formExperience = useForm<InputExperience>({
        resolver: zodResolver(experienceSchema),
    });

    const onsubmitInfo = async (data: InputInfo) => {
        startTransition(async () => {
            if (id) await editInfo(id) //try to edit the form here if id exist
            await createInfo(data);
            router.refresh();
        });
    };

    const onSubmitExperience = async (data: InputExperience) => {
        startTransition(async () => {
            const result = await createExperience(data);
            if (!result.success) setErr("Unexpected error. Unable to create");
            router.refresh();
        });
    };


    return (
        <section className="mx-auto px-10 md:max-w-md pt-10 md:pt-0 bg-re">

            <Form {...formInfo}>
                <form
                    onSubmit={formInfo.handleSubmit(onsubmitInfo)}
                    className="space-y-8"
                    ref={formRef}
                >
                    <FormField
                        control={formInfo.control}
                        name="resume"
                        render={({ field }) => (
                            <FormItem>
                                <FormControl>
                                    <Input placeholder="resume" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

//problems arises here:
export const EditForm = async({ id }: { id: number }) => {
    let [isPending, startTransition] = useTransition();
    const info = await editInfo(id)

    return (
        <AboutForm id={info}/>   //id 
       
    );
};

type '{ info: { id: number; resume: string; description: string; createAt: Date; } | null; suceess: boolean; }' is not assignable to type 'number'.ts(2322)

AboutForm.tsx(38, 37): The expected type comes from property 'id' which is declared here on type 'IntrinsicAttributes & { id: number; }'

I tried using dynamic import from a lesson i saw online but it didnt work. My end goal is to put all he compnent in one place.The goal of the edit is to trigger the modal to edit the form usign the same form i used for create. The image for the app for reference

Answer 1

Your AboutForm expects an id as parameter and the info parameter you send is an object you get from the editInfo call so you can either change what is returned from there or change <AboutForm id={info}/> to <AboutForm id={info.info.id}/>

You might need to check if info is not null something like

return (
{ info && info.info ?
        <AboutForm id={info}/>
: <>Maybe a meaningful message here ;)</>
}
    );