felix_xiao felix_xiao - 7 months ago 167
Javascript Question

Send an Email Using React.js + Express.js

I have built a web app using React.js in ES6. I currently want to create a basic "Contact Us" page and want to send an email. I am new to React and just discovered that I cannot actually send an email using React itself. I'm following the tutorial with

nodemailer
and
express-mailer
but have had some difficulty integrating the example code with my React files. Specifically, calling
node expressFile.js
works, but I have no idea how to link this to my React front-end.

Nodemailer: https://github.com/nodemailer/nodemailer

Express-mailer: https://www.npmjs.com/package/express-mailer

My React component for the form is below. How would I write an Express file so that it is called from the
contactUs()
method in my React component? Thanks!

import React from 'react';
import {
Col,
Input,
Button,
Jumbotron
} from 'react-bootstrap';

class ContactView extends React.Component{
contactUs() {
// TODO: Send the email here

}
render(){
return (
<div>
<Input type="email" ref="contact_email" placeholder="Your email address"/>
<Input type="text" ref="contact_subject" placeholder="Subject"/>
<Input type="textarea" ref="contact_content" placeholder="Content"/>
<Button onClick={this.contactUs.bind(this)} bsStyle="primary" bsSize="large">Submit</Button>
</div>
)
}
};

export default ContactView;

Answer

When the button is clicked, execute an ajax POST request to your express server, i.e "/contactus". /contactus can fetch the email, subject, and content out of the post data and send to the mail function.

In React:

$.ajax({
    url: '/contactus',
    dataType: 'json',
    cache: false,
    success: function(data) {
        // Success..
    }.bind(this),
    error: function(xhr, status, err) {
        console.error(status, err.toString());
    }.bind(this)
});

In express add the nodemailer code within an express post handler:

app.post('/contactus', function (req, res) {
    // node mailer code
});