Why I'm getting undefined then correct value in console.log()?

Question

This is the OnSubmit function:

const onSubmit = async (data) => {
        console.log(data);

        const formData = new FormData();
        formData.append("courseName", data.courseTitle);
        formData.append("courseDescription", data.courseShortDesc);
        formData.append("price", data.coursePrice);
        formData.append("whatYouWillLearn", data.courseBenefits);
        // formData.append("category", data.courseCategory);
        formData.append(
            "instructions",
            JSON.stringify(data.courseRequirements)
        );
        formData.append("status", COURSE_STATUS.DRAFT);
        formData.append("tag", JSON.stringify(data.courseTags));
        formData.append("thumbnailImage", data.courseImage);

        for (var key of formData.entries()) {
            console.log(key[0] + ", " + key[1]);
        }
        setLoading(true);
        const result = await addCourseDetails(formData, token);
        if (result) {
            dispatch(setCourse(result));
            dispatch(setStep(2));
        }
        setLoading(false);
    };

This is the code for taking this form input:

        <form
            onSubmit={handleSubmit(onSubmit)}
            className="text-white rounded-md border-richblack-700 bg-richblack-800 p-6 space-y-8"
        >
            {/* Course Name */}
            <div>
                <label htmlFor="courseTitle" className="text-sm">
                    Course Title<sup className=" text-pink-200">*</sup>
                </label>
                <input
                    placeholder="Enter Course Title"
                    {...register("courseTitle", { required: true })}
                    style={{
                        boxShadow:
                            "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
                    }}
                    className="w-full rounded-[0.5rem] bg-richblack-700 p-[12px] text-richblack-5"
                />
                {errors.courseTitle && <span>Course Title is required.</span>}
            </div>

            {/*did same for the other fields*/}

            {/* Buttons */}
            <div className="flex justify-end gap-4">
                {editCourse && (
                    <button
                        type="button"
                        onClick={() => dispatch(setStep(2))}
                        disabled={loading}
                        className="flex items-center gap-x-2 bg-richblack-700 rounded-lg px-5 py-2"
                    >
                        Continue without saving
                    </button>
                )}
                <IconBtn
                    onclick={() => {
                        onSubmit();
                    }}
                    type="submit"
                    text={editCourse ? "save changes" : "save and continue"}
                />
            </div>
        </form>

The console.log() statement that i write is giving me these output in console:

undefined

{courseTitle: 'kdfdskdjkfk', courseShortDesc: 'dsf', coursePrice: 425, courseCategory: '64cec3e0ed0a95c0a6b1315e', courseBenefits: 'vdf\n', …}courseBenefits: "vdf\n"courseCategory: "64cec3e0ed0a95c0a6b1315e"courseImage: File {name: 'courseThumbnail.jpeg', lastModified: 1690903634758, lastModifiedDate: Tue Aug 01 2023 20:57:14 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 203349, …}coursePrice: 425courseRequirements: ['dsg']courseShortDesc: "dsf"courseTags: (2) ['kldsf', 'sdf']courseTitle: "kdfdskdjkfk"[[Prototype]]: Object

console pic: Console Output

I tried logging on different snippet lines. I'm not able to understand why is that console printing twice and why undefined on first console log

When i'm appending those values to form, it is appending to it but also showing error in console, like for first value, the courseTitle values is undefined, and so on for all following values

Answer 1

Remove

onclick = {() => {
    onSubmit();
}}

from your IconBtn you are not null to the function which might be causing the problem. You have used React hook form,

/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>

will trigger the on submit function you must not need on the nClick event, form will trigger when you click on the button so remove the

onclick = {() => {
    onSubmit();
}}

from your

<IconBtn
    onclick={() => {
        onSubmit();
    }}
    type="submit"
    text={editCourse ? "save changes" : "save and continue"}
/>