I am trying to display a modal pop up on submit in a form in React. Right now, the invalid email and name modal pops up just fine. The problem is, It will not display the alternate success message if the form was submitted correctly. I also am not sure if it will persist upon successful submission, but can't get past this problem to test it out. Please let me know where I am going wrong. Thanks!!

Contact.js:

import React, { useState } from "react";
import { FaEnvelope } from "react-icons/fa";
import Modal from "./Modal";

const Contact = (props) => {
  const [showModal, setShowModal] = useState();
  const [enteredName, setEnteredName] = useState("");
  const [enteredEmail, setEnteredEmail] = useState("");

  const contactHandler = (event) => {
    event.preventDefault();
    if (enteredName.trim().length === 0 || enteredEmail.trim().length === 0) {
      setShowModal({
        title: "Invalid Input",
        message: "Please enter a valid name and email",
      });
      return;
    }
    if (enteredName.trim().length > 0 || enteredEmail.trim().length > 0) {
      setShowModal({
        title: "Thank You",
        message: "Your form as been submitted",
      });
      return;
    }
    props.Contact(enteredName, enteredEmail);
    setEnteredName("");
    setEnteredEmail("");
  };

  const modalHandler = () => {
    setShowModal(null);
  };

  return (
    <div>
      {showModal && (
        <Modal
          title={showModal.title}
          message={showModal.message}
          onShowModal={modalHandler}
        />
      )}
      <div className="w-full h-screen main flex justify-center items-center p-4">
        <form
          onSubmit={contactHandler}
          method="POST"
          action="https://getform.io/f/8e30048c-6662-40d9-bd8b-da62595ce998"
          className="flex flex-col max-w-[600px] w-full"
        >
          <div className="pb-8">
            <p className="text-4xl font-bold inline border-b-4 bdr text-main">
              Contact
            </p>
            <span>
              <FaEnvelope className="inline-flex ml-4 text-4xl text-main" />
            </span>
            <p className="text-main py-2">
              Please enter your info below and I will be back with you within 24
              hours. You can also email me directly at:
              <a
                href="mailto:[email protected]"
                className="ml-2 font-bold hover:text-[#FFE5b4]"
              >
                [email protected]
              </a>
            </p>
          </div>
          <input
            className="form-bg p-2"
            type="text"
            placeholder="Name"
            name="name"
          />
          <input
            className="my-4 py-2 form-bg"
            type="email"
            placeholder="Email"
            name="email"
          />
          <textarea
            className="form-bg p-2"
            name="message"
            rows="10"
            placeholder="Message"
          ></textarea>
          <button className="con-btn">Submit</button>
        </form>
      </div>
    </div>
  );
};

export default Contact;

Modal.js:

import React from "react";

const Modal = (props) => {
 
  return (
    <div>
      <div className="backdrop" onClick={props.onShowModal} />
      <div className="modalPos">
        <div className="header">
          <h2>{props.title}</h2>
        </div>
        <div className="content">
          <p>{props.message}</p>
        </div>
        <div className="actions">
          <button onClick={props.onShowModal} className="hero-btn">
            Exit
          </button>
        </div>
      </div>
    </div>
  );
}

export default Modal

CodePudding user response：

You didn't put

value = {enteredName} 

in your input element. so your states will not be set by user's input.

CodePudding user response：

*disclaimer : my grammar so bad so i am apologize about that.

i just try your code and when i submit is always invalid, i check it and the state name and email is empty string when i submit because your forgot implement onChangeHanlde in input.

1. create function to handle onChange

const onChangeHandler = (field, event) => {
    if (field == "email") {
      setEnteredEmail(event.target.value);
    } else if (field == "name") {
      setEnteredName(event.target.value);
    }
  };

2. and add onChange, value attribute in input tag both name and email

          <input
            className="form-bg p-2"
            type="text"
            placeholder="Name"
            name="name"
            onChange={(e) => {
              onChangeHandler("name", e);
            }}
            value={enteredName}
          />
          <input
            className="my-4 py-2 form-bg"
            type="email"
            placeholder="Email"
            name="email"
            onChange={(e) => {
              onChangeHandler("email", e);
            }}
            value={enteredEmail}
          />