javascriptreactjsemailfrontend

Service ID invalid when trying to use EmailJS with React


I created a form to contact me on my website, for that I use EmailJS. However when I try to send myself a mail through the contact form I got a 400 Error The service ID is invalid. I followed every steps of that tutorial as I haven't use EmailJS before https://blog.mailtrap.io/react-send-email/

Here is my Contact component

    class Contact extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = { feedback: '', name: 'Name', email: 'email@example.com' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        }
    
        render() {
          return (
            <form className="test-mailing">
              <h1>Let's see if it works</h1>
              <div>
                <textarea
                  id="test-mailing"
                  name="test-mailing"
              onChange={this.handleChange}
              placeholder="Post some lorem ipsum here"
              required
              value={this.state.feedback}
              style={{width: '100%', height: '150px'}}
            />
          </div>
          <input type="button" value="Submit" className="btn btn--submit" onClick={this.handleSubmit} />
        </form>
      )
      }

      handleChange(event) {
        this.setState({feedback: event.target.value})
      }
    
      handleSubmit() {
        const templateId = 'template_id';

          this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
      }

      sendFeedback (templateId, variables) {
        window.emailjs.send(
          'gmail', templateId,
          variables
          ).then(res => {
            console.log('Email successfully sent!')
          })
          // Handle errors here however you like, or use a React error boundary
          .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
        }
}

And here is what I added in my index.html

`<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js"></script>
    <script type="text/javascript">
      (function(){
        emailjs.init("my_user_ID_here"); // Obtain your user ID at the dashboard https://dashboard.emailjs.com/integration
      })();
`

Solution

  • That was happening to me, and it was because I didn't have the account activated. when you log in, click on 'email services' and select, for example, gmail with your account

    pd: google translate