How to send an email in React with Emailjs - Tutorial - ReactJs - Hooks - EmailJs - Form

[jfdesousa7]

Today we will learn how to send an email from our typical contact section of our web page made in your Front with React.js using its new feature which are hooks. With the emailJS help we will send our query to an email. With emailJs you don't need a backend language to send emails.

TUTORIAL

1. We open the terminal by pressing the window + R
key
2. We go to the desktop by typing cd desktop
3. We write the following instruction npx create-react-app emailjs
4. navigate to the created folder cd emailjs
5. We proceed to install the following package npm i emailjs-com
6. Sign up at EmailJS .
7. After registering, click Email Services , choose Gmail to get started. then you can modify the provider whenever you want.
8. Let's take our API key right now. In EmailJS, navigate to Accound > API KEYS > then copy the userid to a notepad for later use.

We create a template in EmailJS > Email Templates, Replace the fields that will be completed with the form submission with {{}} double braces. Inside the braces will be the key in the key-value pair of the state of your component.

Now we open our file App.js

we import emailJS

import emailjs from 'emailjs-com'

our code will be as follows:

import React, {useState} from 'react';
import emailjs from 'emailjs-com';
const App = () => {
   const frmContact = { userEmail:'', concernCategory:'', emailTitle:'', emailDetails:'' };
   const [contact,setContact] = useState(frmContact);
   const [showMessage, setShowMessage] = useState(false);
   const handleChange = e => { 
        const {name,value} = e.target;
        setContact({...contact,[name]:value}); 
   };
   const handleSubmit = e =>{
        e.preventDefault();
        emailjs.send('default_service','<YOUR TEMPLATE ID>', contact, '<YOUR USER ID>')
        .then((response) => {
                   console.log('SUCCESS!', response.status, response.text);
                   setContact(frmContact);
                   setShowMessage(true);
        }, (err) => {
                   console.log('FAILED...', err);
        });
   }
  return (
    <div className="container pt-2 text-center">
        <div className="alert alert-light" role="alert">
          <a href="https://tupaginaonline.net/tutorial-para-enviar-correo-con-react-js-hooks-y-emailjs">Tutorial para enviar correo con React.js (Hooks) y emailJS</a>
        </div>
        { showMessage ? <div className="alert alert-success col-md-5 mx-auto" role="alert">Email Send Success!!</div> : ``}
        <form onSubmit={handleSubmit}>
              <div className="pt-3"><h3 className="font-weight-bold"> Contact Us !! </h3></div>
              <div className="pt-3 col-md-5 mx-auto">
                    <div className="form-group text-left"> <b>Your Email</b> <br/>
                        <input required type="text" value={contact.userEmail} name="userEmail" onChange={handleChange} className="form-control" placeholder="Your email" />
                    </div>
              </div>
              <div className="pt-3 col-md-5 mx-auto">
                    <div className="form-group text-left"> <b>Concern Category</b> <br/>
                        <select  required className="form-control" value={contact.concernCategory} onChange={handleChange} name="concernCategory">
                            <option value='' >Select</option>
                            <option value="info" >Info</option>
                            <option value="buy">Buy</option>
                            <option value="play tennis">Play tennis</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
              </div>
              <div className="pt-3 col-md-5 mx-auto">
                    <div className="form-group text-left"> <b>Title</b> <br/>
                        <input value={contact.emailTitle} required type="text" name="emailTitle" onChange={handleChange}  className="form-control" placeholder="Your email" />
                    </div>
              </div>
              <div className="pt-3 col-md-5 mx-auto">
                    <div className="form-group text-left"> <b>Describe your concerns</b> <br/>
                        <textarea required name="emailDetails" onChange={handleChange} className="form-control" placeholder="Describe your concerns" value={contact.emailDetails}></textarea>
                    </div>
              </div>
              <div className="pt-3 col-md-5 mx-auto text-left">
                    <button className="btn btn-primary">Submit</button>
              </div>
        </form>
        <div className="pt-5 font-weight-bold">tupaginaonline.net</div>     
    </div>
  );
}
export default App;

We test that the mail is sent by viewing the console log

Now we execute in the terminal console

npm run build

We upload our build to the server and that's it

We can see the example in operation by clicking Here!

If you want to have your website, click the button below

¡Order your website now!