javascript - React contact form issues email js

Question

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [number, setNumber] = useState('');
const [message, setMessage] = useState('');



const service_id = 'xxxxx'
const template_id = 'xxxxx'
const user_id = 'xxxxx'
const orderDetails = {

    name: name,
    email: email,
    phone: number,
    message: message
}




const sendEmail = () => {
    emailjs.send(service_id, template_id, orderDetails, user_id);
}

 

 <form className="contactusinfo__form" >
                        <input type="text" placeholder='Your Name' required onChange={(e) => setName(e.target.value)} />
                        <input type="email" placeholder='Your E-mail' required onChange={(e) => setEmail(e.target.value)} />
                        <input type="number" placeholder='Your Number' required onChange={(e) => setNumber(e.target.value)} />
                        <textarea name="message" placeholder='Your Message' id="" cols="30" rows="5" required onChange={(e) => setMessage(e.target.value)} ></textarea>
                        <button style={{ fontSize: '16px', fontFamily: 'Lato' }} type='submit' onClick={sendEmail()}>
                            SEND
                        </button>
                    </form>

I'm trying to send an email from a contact form using emailjs and running into a bug. I had it working fine earlier but now I don't know what I've changed. My issue is that the emails come in sync with the amount of event changes in the textarea.

What's the the best practice to handle my contact form?

question from:https://stackoverflow.com/questions/65944104/react-contact-form-issues-email-js

Answer 1

so i changed it to

const sendEmail = () => {
e.preventDefault();
emailjs.send(service_id, template_id, orderDetails, user_id);

}

and thats seemed to have fixed the issue. Watch out Zuckerburg...