Facing nested form submit issue in react js

Question

I am facing some issues with my child form, when I click on submit on my child modal form it also submits the parent form. I set preventDefault but it is not working.

FORMs Submit function, handleProductSubmit form is a parent form function and handleUploadImages form is a child form function

            // PRODUCT UPLOAD FUNCTION
            const handleProductSubmit = async (e) => {
              console.log('Form 1');
                e.preventDefault()

            }

            // UPLOAD IMAGES FROM MODAL

            const handleUploadImages = (event) => {
                console.log('Form 2');
                event.preventDefault();

            }

Parent FORM and modal form

return (
<>
{productData.length === 0 ? <CircularProgress color="inherit" /> :
<div className="mt-5 md:mt-0 md:col-span-2">

<form onSubmit={handleProductSubmit} id="form1"> // PARENT FORM

   <div className="grid grid-cols-3 gap-4">
     <div className="col-span-2">
        <div className="">
            <div className="">
                {/* TITLE */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-3"> Title </label>
                    <input className=" " name='title' id="name" 
                    onBlur={handleGetProductValues} 
                    type="text" placeholder="Title" />
                </div>
            </div>

        </div>
    </div>
    <div className=" dark:bg-slate-800 space-y-6 sm:p-6">
        <section className='image-upload'>
            <Modal eventBubbling={eventBubbling} 
            selectedItems={selectedImages} 
            handleUploadImages={handleUploadImages} // MODAL FORM
            showModal={showModal} 
            setShowModal={setShowModal} /> 
        </section>


        <div className=" py-3 text-right ">
            <button type="submit" form="form1">Publish</button>
        </div>
    </div>


</div>
</form>
</div>

}
</>
)
};

export default EditProduct;

CHILD FORM (MODAL). I passeed the handleUploadImages function in modal component.

<form onSubmit={handleUploadImages} id='form2'>
    <label className=''>
      
        <br />
        <div>
            <span>+ Add Images up to 10 images</span>
            <input
                type="file"
                name="images"
                onChange={setImages}
                multiple
                accept="image/png , image/jpeg, image/webp"
            />
        </div>
    </label>
    <div className=" py-3 text-right ">
        <button type="submit" form="form2">Upload</button>
    </div>
</form>

Answer 1

you can declare each submit for related form :

1. add id to your form ( id="form1" )
2. add form attribute to your button ( form="form1" )

 <form onSubmit={handleUploadImages} id="form1">
        <label className='mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md flex-col items-center bg-white dark:bg-slate-800'>
            <div>
                <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            </div>
            <br />
            <div>
                <span>+ Add Images up to 10 images</span>
                <input
                    type="file"
                    name="images"
                    onChange={setImages}
                    multiple
                    accept="image/png , image/jpeg, image/webp"
                />
            </div>
        </label>
        <div className=" py-3 text-right ">
            <button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" form="form1">Upload</button>
        </div>
    </form>