-1

I am trying to use an API for sending emails with JavaScript, it's called SmptJs. The API works perfectly when integrated in a simple HTML file, but I don't know how to integrate it in a reactJs component !

Here is the api link and doc : https://smtpjs.com/

I tried it first in my HTML page, like this : code of html file

And it worked, I received the email. But I want to add the api inside my React Component, specifically when I click submit in my form but I got an error and I think it's not compatible with ReactJs syntax, here is the image :

code of react component the error msg

  • 5
    What have you tried so far? – Carlos Sá Aug 19 '19 at 11:40
  • 1
    Please add your code, it will help to debug – Nagesh Aug 19 '19 at 11:46
  • I just added images of my code. thanks for your help. – Othman El houfi Aug 19 '19 at 12:01
  • Possible duplicate of [How to include external javascript library in reactjs](https://stackoverflow.com/questions/36066508/how-to-include-external-javascript-library-in-reactjs) – Max Aug 19 '19 at 12:05
  • 3
    Please add code, errors and data as **text** ([using code formatting](//stackoverflow.com/editing-help#code)), not images. Images: A) don't allow us to copy-&-paste the code/errors/data for testing; B) don't permit searching based on the code/error/data contents; and [many more reasons](//meta.stackoverflow.com/a/285557). In general, code/errors/data in text format >>>> code/errors/data as an image >> nothing. Images should only be used, *in addition to text in code format*, if having the image adds something significant that is not conveyed by just the text code/error/data. – Makyen Aug 19 '19 at 23:40

1 Answers1

2

Checkout the simple component with example here https://jsfiddle.net/92a68tmz/

You have to include the tag of smtpjs in your public/index.html or general index.html file in your project and you can use it like this

 sendMail() {
     window.Email.send({
        SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
        To : 'them@website.com',
        From : "you@isp.com",
        Subject : "This is the subject",
        Body : "And this is the body"
    }).then(
  message => alert(message)
);

in your onSubmit you directly use this

     const onSubmit = data => {
              window.Email.send({
                    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
                    To : data.email,
                    From : "you@isp.com",
                    Subject : "This is the subject",
                    Body : "And this is the body" + data.firstname
                }).then(
                    message => alert(message)
      }

No need for a separate Emailer component.

Hemanath
  • 1,075
  • 6
  • 15
  • 1
    Your solution works perfectly for me. I made a new component called Emailer and I added it in the DOM and it works. But I am stuck with something stupid, I can't add the component where I want ! can I show you an image of my code ? – Othman El houfi Aug 19 '19 at 12:28
  • Yeah @OthmanElhoufi , i am ready to help you further :) – Hemanath Aug 19 '19 at 12:35
  • check out the answer I just added. – Othman El houfi Aug 19 '19 at 12:46
  • If you need any other information please do tell me, I'm really stuck lol @Raja – Othman El houfi Aug 19 '19 at 13:26
  • I will look into it :) – Hemanath Aug 19 '19 at 13:27
  • @Hemanath hi i am do same example https://jsfiddle.net/92a68tmz/ but i not access data input => i have text input with a name="fname" input data.fname it not working console.log("email sending " ,data.fname) / log output email sending undefine i try to send email also not working => Conversion failed when converting from a character string to uniqueidentifier. – Mr Coder Apr 06 '20 at 11:12