Not able to submit the data to firebase from contact form

Question

import React, { useState } from 'react'
        import styled from 'styled-components'
        import Title from '../Components/Title'
        import { InnerLayout, MainLayout } from '../Styles/Layout'
        import Button from '../Components/Button'
        import { db } from '../firebase';
        
        function Contact() {
            const [name, setName] = useState("");
            const [email, setEmail] = useState("");
            const [message, setMessage] = useState("");
            const [subject, setSubject] = useState("");
        
            const handleSubmit = (e) => {
                e.preventDefault();
        
                db.collection('mail').add({
                    name: name,
                    email: email,
                    subject: subject,
                    message: message,
                })
                    .then(() => {
                        alert("Thank you for contacting. Your message has been sent successfully.");
                    })
                    .catch((err) => {
                        alert(err.message);
                    });
        
                setName('')
                setEmail('')
                setSubject('')
                setMessage('')
            };
        
            return (
                <MainLayout>
                    <Title title={'Contact'} span={'Contact'} />
                    <ContactMain>
                        <InnerLayout className='contact-section'>
                            <div className="left-content">
                                <div className="contact-title">
                                    <h4>Get In Touch</h4>
                                </div>
                                <form className="form" onSubmit={handleSubmit}>
                                    <div className="form-field">
                                        <label htmlFor="name">Enter Your Name</label>
                                        <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="email">Enter Your Email</label>
                                        <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="subject">Enter Your Subject</label>
                                        <input type="text" id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="text-area">Enter Your Message</label>
                                        <textarea name="textarea" id="textarea" cols="30" rows="10" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
                                    </div>
                                    <div className="form-field f-button">
                                        <Button title="Send Email" />
                                    </div>
                                </form>
                            </div>
                        </InnerLayout>
                    </ContactMain>
                </MainLayout>
        
            )
    }

I don't know why but I am not able to send the details to my firebase database. I am not able to find the issue in this code. I have copied the firebase database key and all in the firebase.js and then imported it in this contact.js and I then made the necessary changes in this. Still, I am not able to figure out the issue.

Answer 1

I would reset the form once the promise returned by add() is resolved.

const handleSubmit = (e) => {
  e.preventDefault();
    
  db.collection('mail').add({
    name: name,
    email: email,
    subject: subject,
    message: message,
  }).then(() => {
    // Reset those states here
    setName('')
    setEmail('')
    setSubject('')
    setMessage('')
    alert("Thank you for contacting. Your message has been sent successfully.");
  }).catch((err) => {
    alert(err.message);
  });
};

I guess your states are being reset to "" before the document is added as those setState methods would have ran before the doc was added.

Answer 2

Potentially because your button html within its the button component type is not set to 'submit' - I had the same issue I think which ended up being super simple.