Send an Email Using React.js + Express.js

Question

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;

Ryan Jenkin · Accepted Answer · 2016-05-04 02:29:38Z

12

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
});

edited May 4, 2016 at 2:29

answered May 4, 2016 at 2:20

Ryan Jenkin

9248 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Soubhik Mondal Over a year ago

Providing a more verbose answer with a code example will help OP

felix_xiao Over a year ago

thanks for the advice, this sounds like it'll work! Also this might be a dumb question, but right now, when I compile my application, I just run npm start. How would I get my express server to run at the same time?

Ryan Jenkin Over a year ago

You start the express server with node: node expressFile.js

blakenetz · Accepted Answer · 2017-03-23 01:59:46Z

7

@ryan-jenkin is completely correct.

Alternatively, if you don't have / want jQuery as a dependency, you can use the native fetch api. Also, I typically set up my form so each input has a state, then use that state in the stringified blob.

Client-side (React):

handleSubmit(e){
  e.preventDefault()

  fetch('/contactus', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: this.state.email,
      // then continue this with the other inputs, such as email body, etc.
    })
  })
  .then((response) => response.json())
  .then((responseJson) => {
    if (responseJson.success) {
      this.setState({formSent: true})
    }
    else this.setState({formSent: false})
  })
  .catch((error) => {
    console.error(error);
  });
}

render(){
  return (
    <form onSubmit={this.handleSubmit} >
      <input type="text" name="email" value={this.state.email} />
      // continue this with other inputs, like name etc
    </form>
  )
}

edited Mar 23, 2017 at 1:59

answered Mar 23, 2017 at 1:50

blakenetz

1312 silver badges7 bronze badges

1 Comment

D-Man Over a year ago

Would using react-router complicate this process at all? I have a react router in place, fetched from the client side, and have a post on my express server but am still getting a 404 that the route is not found. @blakeface

Collectives™ on Stack Overflow

Send an Email Using React.js + Express.js

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related