473,287 Members | 3,319 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,287 developers and data experts.

How to send emails with ReactJS using EmailJS?

sofiatarhonska
Probably everyone knows that ReactJS is a wonderful library for building web-applications. However, it doesn't look so easy to add some backend features to it. For example, how would you build in a contact form?

In this post I'm going to cover some methods on how to do it simply.

First of all, you cannot send emails with just React, you have to use 3rd party tools to do it. EmailJS lets you set up sending without touching the backend at all. You just have to connect the email client and create templates. As for email clients, you can use whichever you like: Gmail, Outlook or more pricey ones like Mailgun.

Let's proceed with the most common one - Gmail.

First step - sign up at https://www.emailjs.com. Then, build your email template. There is a ready template builder for it. You can add attachments, auto-reply or dynamic variables.


Image credit: Mailtraps tutorial on sending emails using ReactJS

Next step is connecting EmailJS to the React project. You can do it with npm.
Now, let us send the email itself. You can send simple emails with emailjs.send and forms with emailjs.send.Form.

As for forms, you should put the following code into the src/Form.js file of your project:
Expand|Select|Wrap|Line Numbers
  1. import React from 'react';
  2. export default class extends React.Component {
  3.   constructor(props) {
  4.     super(props);
  5.     this.state = { feedback: '', name: 'Name', email: 'email@example.com' };
  6.     this.handleChange = this.handleChange.bind(this);
  7.     this.handleSubmit = this.handleSubmit.bind(this);
  8.   }
  9.   render() {
  10.     return (
  11.       <form className="test-mailing">
  12.         <h1>Let's see if it works</h1>
  13.         <div>
  14.           <textarea
  15.             id="test-mailing"
  16.             name="test-mailing"
  17.             onChange={this.handleChange}
  18.             placeholder="Post some lorem ipsum here"
  19.             required
  20.             value={this.state.feedback}
  21.             style={{width: '100%', height: '150px'}}
  22.           />
  23.         </div>
  24.         <input type="button" value="Submit" className="btn btn--submit" onClick={this.handleSubmit} />
  25.       </form>
  26.     )
  27.   }
  28.   handleChange(event) {
  29.     this.setState({feedback: event.target.value})
  30.   }
  31.   handleSubmit() {
  32.   }
  33. }
Then, add the handleSubmit() to sendFeedback() to start sending:
Expand|Select|Wrap|Line Numbers
  1.   handleSubmit (event) {
  2.     const templateId = 'template_id';
  3.     this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
  4.   }
  5.   sendFeedback (templateId, variables) {
  6.     window.emailjs.send(
  7.       'gmail', templateId,
  8.       variables
  9.       ).then(res => {
  10.         console.log('Email successfully sent!')
  11.       })
  12.       // Handle errors here however you like, or use a React error boundary
  13.       .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
  14.   }
  15.  
Just don't forget to import Form component from the main component in src/App.js. And you are ready to customize the function with your own parameters.
And you are ready to go! See, simple?
Sep 22 '22 #1
1 8680
Lord123
1 Bit
With EmailJS, you can send emails with ReactJS using the EmailJS ReactJS SDK.
Oct 22 '22 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

40
by: ian | last post by:
Hi, I'm a newbie (oh no I can here you say.... another one...) How can I get Python to send emails using the default windows email client (eg outlook express)? I thought I could just do the...
6
by: slider | last post by:
Hey all i am using Access 2003 on Win Xp and i have been trying to make this code send emails to the users stored on each record. So far is works, except in the body of the email i need it to say a...
3
by: drnorbert | last post by:
What is the best way to receive and send emails in MsAccess? Could this be done without Outlook automatation?
3
by: Thomas Weise | last post by:
My app attempts to send eMails via SmtpClient. This works with some addresses, but for instance a mail server hosted by godaddy always rejects the mails. The reply is "Relay access denied". Does...
0
by: manontheedge | last post by:
I'm trying to automatically send emails through VB, through Microsoft Outlook 2003, but get the security message ... "A program is trying to automatically send e-mail on your behalf. Do you want...
0
by: gauravbhati | last post by:
Hello, The task is to send emails in batch at specific times and not each time if user clicks on submit. Details: I have an InfoPath form which employees will use to putup request to update their...
1
by: nazzzzz | last post by:
can anyone help me to send emails to ids in database using vb.net and microsoft outlook thanks in advance..
2
by: =?Utf-8?B?U3VzYW4=?= | last post by:
I can't send emails on my Microsoft outlook express 6. HELP?
1
by: Fuzz13 | last post by:
I am writing a program that will periodically scan for changes in a file, and if that file changes I need it to send out an email based on the email field that the user fills in. My question is,...
1
by: MHutcheson81 | last post by:
I have a MS Access 2010 db taht I want to send emails from automatically. I have the query setup but am getting stuck with the CDO VBA. They query is call 'qryEmails' and contains the following 4...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.