import EmailInputForm from "./EmailInputForm";

import React from "react";

import EmailInputForm from "./EmailInputForm";

const App = () => {


  return (
    <div >
      <EmailInputForm />
    </div>
  );
}

export default App

Install EmailJS

• Install EmailJS into the project directory with the command prompt.

npm install @emailjs/browser --save

• Go to EmailJS and create an account here.

• After creating an account, choose any of the email service providers and setting up the email.

Note: We will be using Gmail here.

After connecting, it will be showing the service we have chosen.

• Go to the Email Templates section and choose, Create New Template.

Note: Set up the format here, as you like.

Integrate EmailJS

• Import EmailJS into the component.

import emailjs from '@emailjs/browser';

• Write the below code inside the function,

    const form = useRef();
    const sendEmail = (e) => {
        e.preventDefault();
        emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
        e.target.reset();

    };

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
const EmailInputForm = () => {

    const form = useRef();

    const sendEmail = (e) => {
        e.preventDefault();
        emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
        e.target.reset();
    };

    return (
        <div className="my-20 flex justify-center items-center">
            {/* heading */}

            <div>
                <h1 className="text-4xl mb-20 text-center">Send Mail</h1>

                {/* input form */}
                <form class="card-body p-0">

                    <div class="form-control items-center lg:items-start">
                        <input type="text" placeholder="Name" class="input input-bordered w-full max-w-md text-xl" name="user_name" />
                    </div>

                    <div class="form-control items-center lg:items-start">
                        <input required type="email" placeholder="Email" class="input input-bordered w-full max-w-md text-xl" name="user_email" />
                    </div>

                    <div class="form-control items-center lg:items-start">
                        <textarea rows="2" cols="200" placeholder="Message" class="input input-bordered w-full max-w-md text-xl" name="message" />
                    </div>

                    <div class="form-control items-center lg:items-start mt-6">
                        <button type="submit" class="btn btn-sm w-full max-w-md">Send</button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default EmailInputForm;

Replace the YOUR_SERVICE_ID, YOUR_TEMPLATE_ID and YOUR_PUBLIC_KEY with the respective id’s of your account. Follow the below steps that had shown in the images,

• Call the declared function in onSubmit() event of the form.

<form ref={form} onSubmit={sendEmail} class="card-body p-0">

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
const EmailInputForm = () => {

    const form = useRef();

    const sendEmail = (e) => {
        e.preventDefault();
        emailjs.sendForm('service_j1s0mrs', 'template_6z6xzzy', form.current, 'WiWDMEzH4OOTONo8R')
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
        e.target.reset();
    };

    return (
        <div className="my-20 flex justify-center items-center">
            {/* heading */}

            <div>
                <h1 className="text-4xl mb-20 text-center">Send Mail</h1>

                {/* input form */}
                <form ref={form} onSubmit={sendEmail} class="card-body p-0">

                    <div className="form-control items-center lg:items-start">
                        <input type="text" placeholder="Name" className="input input-bordered w-full max-w-md text-xl" name="user_name" />
                    </div>

                    <div className="form-control items-center lg:items-start">
                        <input required type="email" placeholder="Email" className="input input-bordered w-full max-w-md text-xl" name="user_email" />
                    </div>

                    <div className="form-control items-center lg:items-start">
                        <textarea rows="2" cols="200" placeholder="Message" className="input input-bordered w-full max-w-md text-xl" name="message" />
                    </div>

                    <div className="form-control items-center lg:items-start mt-6">
                        <button type="submit" className="btn btn-sm w-full max-w-md">Send</button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default EmailInputForm;

These are the ways we can send an email in ReactJS. And there are more email-sending service providers out there other than EmailJS. Be sure to check those out as well.