Working on Mailchimp ReactJS Subscribe Form

Question

The first. In order to begin doing the frontend code, I have created my form element; then watched a YouTube video to learn how to use ReactJS with Mailchimp. The video was followed correctly, but the structure had to be changed.

The video is here
https://www.youtube.com/playlist?list=PLBhwujHYboZ9JngT5z7QhefzC9CdX8m_T

Having set up everything needed to begin pulling the data and email, and getting the input form to work correctly, I ran into some issues:

form.js:86: Uncaught ReferenceError: email is not defined"

disabled={!validator.isEmail(this.state.email)} 

I did was that I imported the npm package:

import validator from "validator";

form.js:80 Uncaught ReferenceError: handleOnChangeEmail is not defined

 onClick={() => handleSendEmail(email)} 

Then, I began working on the server.js file to set up mailchimp, but I was unable to test out the code if the form wasn't working correctly.

Can anyone give some tips and advice. What I could do fixed the issue that having. Thank you so much. I look forward to talking with you and working together to solve this issue.

import React, { Component } from "react";
import { apiUrl } from "./helpers"
import axios from "axios";
import validator from "validator";
import PropTypes from 'prop-types';
import Loading from "./shared/loading";


  // eslint-disable-next-line
  class FormComp extends Component {

    constructor(props){
      super(props);
      this.state = {
        email: '', //the form does not have the input or email will be empty.
        loading: false //the form will be not loading but when they click on the button will load.
      }
    }

    handleOnChangeEmail = email => {
      this.setState ({ //This how you set the component set in react. //Line 80:43:  'handleOnChangeEmail' is not defined
        email: email
      })
    }

    handleLoadingState = loading => {//Will handle the loading of the form.
      this.setState({loading: loading });
    }

    handleSendEmail = email => {//When they push the button to send email.
      this.handleLoadingState(true);
      axios.post(`${apiUrl}/subscribe`,{//The Axios will post the email on the suscribe list.
        email: email
      }).then(res => {//Will receive an success message when email had been sent.
        if(res.success) {
          this.setState({
            email: '', //Will be a empty string within the input field.
            success: 'Thank you for subscribing! Welcome to the percepverse!'
          });
            this.handleLoadingState(false); //Turn off the Loading State
        } else {
          this.setState({// When the mailchimp past in an error saying unable to subscribe.
            email: '', //Will be a empty string within the input field.
            chimpError: 'Mailchmp got an error please try again.',
          }); 
          this.handleLoadingState(false);
          //Turn off the Loading State
        }
      }).catch(issues => {//Will receive an error message if message has been not sent.
        if(issues.error) {
          this.handleLoadingState(false);//Turn off the Loading State
            this.setState({
              email: '', //Will be a empty string within the input field.
              error: 'Unable to subscribe! Please enter your email again?',
            });
          } 
      });
    }

 render() {
      // the message and the input values are all component state now
      // this with the nSubmit is handle the Submission of the form to Submit the button  {/* // nSubmit={ this.handleSubmit }> */}
      return (
        <div> 
          {this.state.loading
            ? <Loading message="Working on it..." /> 
            :
            <>
          <form
              className="formElem"
              method="POST">

              <input
                type="email"
                className="userEmail"
                placeholder="a new beginning start here."
                name="userEmail"
                value={this.state.email}
                // eslint-disable-next-line no-undef 
                onChange={({ target }) => handleOnChangeEmail(target.value)} />

              <input
                // eslint-disable-next-line no-undef
                onClick={() => handleSendEmail(email)} //This onClick is use to handle when you send the email request.
                // eslint-disable-next-line no-undef
                disabled={!validator.isEmail(this.state.email)} //"form.js:86: Uncaught ReferenceError: email is not defined"
                // Error Message when using this disabiled and vaildator. 
                //email will not take if not a real email address. 

                className="userSubmit"
                type="subscribe"
                value="subscribe" />
            </form>
              <div className="success">
                  {this.state.success}
              </div>

              <div className="error">
                  {this.state.error}
              </div>

              <div className="ChimpError">
                  {this.state.chimpError}
              </div>
            </>
          }
        </div>
      );
    }
  }

  // eslint-disable-next-line react/no-typos
  FormComp.PropTypes = {
    email: PropTypes.string,
    handleOnChangeEmail: PropTypes.func,
    handleSendEmail: PropTypes.func
  }

export default FormComp;
 

Answer 1

you need to pass this.state.email, otherwise it would have to be global variable.

onClick={() => handleSendEmail(this.state.email)}