Nodemailer doesn't work with react contact form

Question

I get the error below when I try to send an email from the contact form in React.js and Nodemailer. I have a problem because I cannot diagnose where the problem lies. After clicking the send button in forms, no window with an error appears on the screen. Where is the reason why e-mails are not being sent?

Error: getaddrinfo ENOTFOUND smtp.titan.email 
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:67:26) {
  errno: -3008,
  code: 'EDNS',
  syscall: 'getaddrinfo',
  hostname: 'smtp.titan.email ',
  command: 'CONN'
}

ContactForm.js

import React from "react";
import Minimal5 from '../img/minimal5.jpg';
import Minimal4 from '../img/minimal4.jpg';
import {FaFacebookSquare, FaInstagramSquare, FaPinterestSquare } from "react-icons/fa";
import axios from "axios";




class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      subject: '',
      business: '',
      datetime: '',
      launch: '',
      message: ''
    }
  }

  onNameChange(event) {
    this.setState({name: event.target.value})
  }

  onEmailChange(event) {
    this.setState({email: event.target.value})
  }

  onSubjectChange(event) {
    this.setState({subject: event.target.value})
  }

  onBusinessChange(event) {
    this.setState({business: event.target.value})
  }

  onDateTimeChange(event) {
    this.setState({datetime: event.target.value})
  }

  onLaunchChange(event) {
    this.setState({launch: event.target.value})
  }

  onMessageChange(event) {
    this.setState({message: event.target.value})
  }

  submitEmail(e){
    e.preventDefault();
    axios({
      method: "POST", 
      url:"/send", 
      data:  this.state
    }).then((response)=>{
      if (response.data.status === 'success'){
          alert("Message Sent."); 
          this.resetForm()
      }else if(response.data.status === 'fail'){
          alert("Message failed to send.")
      }
    })
  }
  resetForm(){
      this.setState({name: '', email: '',subject:'', business: '', datetime: '', launch: '', message: ''})
  }
  
  render() {
    return (
      <div className="form-container">
        <div className="about-image contact-form">
            <img src={Minimal5} alt="Minimal5" />
              <p className="about-more">I'd love to hear from you! I aim to answer all emails whithin my normal business hours of M-F, 9-4pm.</p>
              <p className="about-more">Use the form below or email me at office@delightart.co</p>
              <ul>
                <li><a href="https://facebook.com/delightartco"><FaFacebookSquare color="#9D7C5E"/></a></li>
                <li><a href="https://facebook.com/delightartco"><FaInstagramSquare color="#9D7C5E"/></a></li>
                <li><a href="https://pinterest.com/delightartco30"><FaPinterestSquare color="#9D7C5E"/></a></li>
                <li><span className="signature">Delightartco</span></li>
              </ul>
        </div>
        <form className="contact-form" onSubmit={this.submitEmail.bind(this)} method="POST">
          <h2>CONTACT</h2>
          <input type="text" id="name" placeholder="Full name" required value={this.state.name} onChange={this.onNameChange.bind(this)}/><br/>
          <input type="email" id="email" placeholder="Email" required value={this.state.email} onChange={this.onEmailChange.bind(this)}/><br/>
          <input type="text" id="subject" placeholder="Subject" required value={this.state.subject} onChange={this.onSubjectChange.bind(this)}/><br/>
          <input type="text" id="business" placeholder="What does your business do?" requiredn value={this.state.business} onChange={this.onBusinessChange.bind(this)} /><br/>
          <input type="time-local" id="datetime" placeholder="Your timezone" required value={this.state.datetime} onChange={this.onDateTimeChange.bind(this)}/><br/>
          <input type="text" id="launch" placeholder="What is your ideal launch date?" required value={this.state.launch} onChange={this.onLaunchChange.bind(this)}/><br/>
          <textarea id="message" placeholder="Tell me more about your project" cols="30" rows="10" required value={this.state.message} onChange={this.onMessageChange.bind(this)}></textarea><br/>
          <button type="submit" className="submit" value="Send Message">Submit</button>
        </form>
        </div>
  );
  }
};

export default ContactForm;



export function Design() {
      return (
        <div className="questions">
          <div className="questions-img">
            <img id="kuki" src={Minimal5} alt="Minimal5" />
            <img id="winnie" src={Minimal4} alt="Portfolio" />
          </div>
          <div className="questions-text">
            <h2 className="blacker-font">Have questions? Check our: </h2>
            <h3 className="service-font">Design services</h3>
            <h3 className="service-font">Process</h3>
            <h3 className="service-font">Pricing</h3>
          </div>
    </div>
  );
}

const express = require("express");
const router = express.Router();
const cors = require("cors");
const nodemailer = require("nodemailer");

const app = express();
app.use(cors());
app.use(express.json());
app.use("/", router);
app.listen(5001, () => console.log("Server Running"));

let transporter = nodemailer.createTransport({
  host: 'smtp.titan.email ',
  port: 587,
  auth: {
    user: "office@delightart.co",
    pass: "qwerty"
  }
});

// verify connection configuration
transporter.verify(function(error, success) {
  if (error) {
    console.log(error);
  } else {
    console.log("Server is ready to take our messages");
  }
});


router.post("/send", (req, res, next) => {
  const name = req.body.name;
  const email = req.body.email;
  const subject = req.body.subject;
  const business = req.body.business;
  const datetime = req.body.datetime;
  const launch = req.body.launch;
  const message = req.body.message; 
  const mail = {
    from: name,
    to: 'office@delightart.co',
    subject: 'Contact Form Submission',
    html: `<p>Name: ${name}</p>
           <p>Email: ${email}</p>
           <p>Subject: ${subject}</p>
           <p>Business: ${business}</p>
           <p>Your timezone: ${datetime}</p>
           <p>Launch date: ${launch}</p>
           <p>Message: ${message}</p>`,
  };

  transporter.sendMail(mail, (err, data) => {
    if (err) {
      res.json({ status: "ERROR" });
    } else {
      res.json({ status: "Message Sent" });
    }
  });
});

Answer 1

I'd same error in my first try with node-Mailer... something about tls

  var transporter = nodemailer.createTransport({
  service: "SMTP",
  auth: {
    user: process.env.POST,
    pass: process.env.PASSWORD,
  },
  tls: { rejectUnauthorized: false }, // add this line to your code
}); 

Answer 2

The error Error: getaddrinfo ENOTFOUND smtp.titan.email says that the program can't find the address smtp.titan.email . I saw an extra space at the end of the string, you should remove it.

let transporter = nodemailer.createTransport({
  host: 'smtp.titan.email ', // <---- notice the extra space at the end of the string and remove it.
  port: 587,
  auth: {
    user: "office@delightart.co",
    pass: "qwerty"
  }
});

Answer 3

I have message 'Server is ready to take our messages'. So that's great. There is another problem because after pressing the SUBMIT button the form is not sent and the button still shows sending: Link. youtu.be/xKZahrqgR7I