Now to pass form values from React to Node server

Question

I have an EmailList component in react with a form that calls EmailServer.js 'NodeMailer' on the server. I am able to send emails with test subject and message defined in the MailServer.js file statically. How can I pass the subject and message as state to be used in NodeMailer.

EmailList Component

var EmailList = React.createClass({
getInitialState() {
    return {
        subject: '',
        message: ''
    }
},
subjectChange(e) {
    this.setState({subject: e.target.value})
},
messageChange(e) {
    this.setState({message: e.target.value})
},
render() {
    return (
        <div>
            <div>
                <Breadcrumb title={this.props.route.title + ' - ' + this.props.location.state.title} />
            </div>
            <div className='ui-outer'>
                <h2 className='text-center'>Email List</h2>
                     <form action='../EmailServer.js'>
                        <div className="form-group">
                            <label htmlFor="subject">Subject</label>
                            <input type="text" name="subject" className="form-control" onChange={this.subjectChange} value={this.state.subject} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="message">Message</label>
                            <textarea rows="8" name="message" className="form-control" onChange={this.messageChange} value={this.state.message} />
                        </div>
                        <button type="submit" className="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
    )
}
})

EmailServer.js

var nodemailer = require('nodemailer');

// Create reusable transporter object using the default SMTP transport 
var transporter = nodemailer.createTransport('smtps://user%40gmail.com:[email protected]');

// Setup e-mail data with unicode symbols
var mailOptions = {
    from: '[email protected]',  
    to: '[email protected]',  
    subject: 'Hello', // <----Pass Subject State HERE
    text: 'Hello World', // <-----Pass Message state HERE
    html: '<b>Hello World</b>' // <-----Pass Message State HERE
};

// Send email with defined transport object
transporter.sendMail(mailOptions, function(error, info) {
    if (error) {
        return console.log(error);
    }
console.log('Message Sent: ' + info.response);
});

Answer 1

If i got your issue correct, there might be a number of issues here.

1. You might want to design your code on server side to handle email sending with nodejs express server requested from client.

app.get('/sendemail', function(req, res) {here you go and read request posted data/json})

Where app is nodejs express server instance.

2. Let react handler to submit a request with one of async http clients (like axios or jquery).

sendEmail: function(e){
    e.preventDefault();
     $.post(
      "/sendemail",{
        email: this.state.email,
        password: this.state.password,
        first_name: this.state.first_name,
        last_name: this.state.last_name
      }, function(result){
        //track result here
      });
}

3. Set form to be submitted with react function:

<form onSubmit={this.sendEmail} >...</form>