./src/Components/ContactForm.jsx Line 37: 'sendEmail' is not defined no-undef

Question

I apologise if my post is poorly formatted, I'm not experienced in either JS/React or Stack overflow

This is my 7th iteration in two days of attempting to get my contact form to work completely. I've had it working to the point that the only items not being sent through on the submission email is the TNC and promos box.

I need the Checkboxes to send true or false depending on whether they are checked or not. bonus points if I can convert the true or false to yes and no

The Error I am getting is

Failed to compile.

./src/Components/ContactForm.jsx
  Line 37:  'sendEmail' is not defined  no-undef

Here is the affected line

<Form onSubmit={sendEmail}>

Here is my "sendMail" arrow function

sendEmail = (e) => {
    e.preventDefault();
    emailjs.sendForm("test", "testTemp", e.target, "user_EPYkKnHwljQTCbJkzO7YD9")
      .then(
        (result) => {
          alert(+"Email sent successfully!");
          e.target.reset();
        },
        (error) => {
          alert("Email send failed... :( I had one job...");
        }
      );
  };

I have an old non-functional version of the contact form on https://test.ghostrez.net if it may help in any way.

Here is the full 'ContactForm.jsx' in case it helps.

import React from "react";
import emailjs from "emailjs-com";
import { Component } from "react";
import { Button, Checkbox, Form, Input, TextArea } from "semantic-ui-react";

export default class ContactUs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      TNC: false,
      promos: true,
    };
  }
  onToggle = () => {
    const TNC = !this.state.TNC;
    this.setState({ TNC });
  };
  onTogglePromos = () => {
    const promos = !this.state.promos;
    this.setState({ promos });
  };
  sendEmail = (e) => {
    e.preventDefault();
    emailjs.sendForm("test", "testTemp", e.target, "user_EPYkKnHwljQTCbJkzO7YD9")
      .then(
        (result) => {
          alert(+"Email sent successfully!");
          e.target.reset();
        },
        (error) => {
          alert("Email send failed... :( I had one job...");
        }
      );
  };
  render() {
    return (
      <Form onSubmit={sendEmail}>
        <Form.Group widths="equal">
          <Form.Field
            id="firstName"
            control={Input}
            label="First name"
            name="firstName"
            placeholder="First name"
            required
          />
          <Form.Field
            id="lastName"
            name="lastName"
            control={Input}
            label="Last name"
            placeholder="Last name"
          />
        </Form.Group>
        <Form.Group widths="equal">
          <Form.Field
            id="Email"
            control={Input}
            label="Email"
            name="email"
            placeholder="joe@schmoe.com"
            onChange=""
            required
          />
          <Form.Field
            id="Phone"
            control={Input}
            label="Phone"
            name="phone"
            placeholder="0469 420 689"
            required
          />
        </Form.Group>
        <Form.Field
          id="Message"
          control={TextArea}
          label="Message"
          name="message"
          placeholder="Message"
          required
        />
        <Form.Group widths="equal">
          <Form.Field>
            <Checkbox
              label="I agree to the Terms and Conditions"
              required
              control={Checkbox}
              data="TNC"
              onChange=''
            />
          </Form.Field>
          <Form.Field>
            <Checkbox
              label="Send me occasional updates and promotions"
              defaultChecked
              control={Checkbox}
              data="promos"
              onChange=''
            />
          </Form.Field>
        </Form.Group>
        <Form.Field
          id="Submit"
          control={Button}
          type="submit"
          value="submit"
          positive
          content="Submit"
        />
      </Form>
    );
  }
}

Answer 1

You are referring to sendEmail in the following statement:

<Form onSubmit={sendEmail}>

However, sendEmail is a member of the ContactUs component/instance. You will have to reference it by using this.sendEmail.

<Form onSubmit={this.sendEmail}>