Displaying a success or error message in React JS upon form submit

Question

I'm trying to display error or success messages upon form submission, depending on whether it worked. I originally just used "alert" but the project requires for the message to be displayed just under the form. I am getting an error in Gulp that "success and error are not defined". But it only mentions the success and error inside the curly braces (in the code) as not defined. I tried googling this and also checking similar questions here, but found nothing on point. Here is my code so far:

import React, { useState } from "react";
import { ReactComponent as Decoration } from "../assets/Decoration.svg";
import Instagram from "../assets/Instagram.svg";
import Facebook from "../assets/Facebook.svg";
import { db } from "../firebase";

function Kontakt() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [msg, setMsg] = useState("");

    const handleSubmit = (e) => {
        const success = '';
        const error = '';

        e.preventDefault();

        db.collection('contacts').add({
            name: name,
            email: email,
            msg: msg
        })
            .then(() => {
                return success;
            })
            .catch(() => {
                return error;
            });

        setName("");
        setEmail("");
        setMsg("");
    }

    return (
        <div id="contact" className="contact-container">
            <div className="contact-box">
                <p>Skontaktuj się z nami</p>
                <Decoration />
                <form className="contact-form" onSubmit={handleSubmit}>
                    <div className="contact-form__labels">
                        <label>
                            <p>Wpisz swoje imię</p>
                            <input name="name" required placeholder="Ania/Krzysztof" className="contact-name" value={name} onChange={(e) => setName(e.target.value)} />
                        </label>
                        <label>
                            <p>Wpisz swój email</p>
                            <input type="email" required placeholder="abc@xyz" className="contact-email" value={email} onChange={(e) => setEmail(e.target.value)} />
                        </label>
                    </div>

                    <label className="contact-text-label">
                        <p>Wpisz swoją wiadomość</p>
                        <textarea
                            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                            className="contact-message" minlength="120" value={msg} required onChange={(e) => setMsg(e.target.value)}>
                        </textarea>
                    </label>
                    {success && <p>"Twoja wiadomość została wysłana."</p>}
                    {error && <p>"Wysyłanie wiadomości nie powdioło się.  Spróbuj jeszcze raz."</p>}
                    <button type="submit" className="contact-btn">Wyślij</button>
                </form>
            </div>
            <div className="footer-container">

            </div>
            <p id="footer">Copyright by Coders Lab</p>
            <a href="https://facebook.com">
                <img id="fb" src={Facebook} alt="Facebook" />
            </a>
            <a href="https://instagram.com">
                <img id="insta" src={Instagram} alt="Instagram" />
            </a>

        </div>

    )
}


export default Kontakt; 

And the error I get:

src\components\Kontakt.js
  Line 59:7:  'success' is not defined  no-undef
  Line 60:7:  'error' is not defined    no-undef

What am I missing?

Answer 1

Main problem that throws compilation here is that success and error constants are scoped within handleSubmit closure. You are trying to access them outside of this closure, that's why they are not defined.

The other problem is that this idea is just wrong. You have defined two constants that have the same value and for some reason you return them from db.collection().add promise callbacks, which are not used anywhere.

function Kontakt() {
  const [status, setStatus] = useState(undefined);

  const handleSubmit = (e) => {
    db.collection('contacts')
      .add({
        name: name,
        email: email,
        msg: msg,
      })
      .then(() => {
        setStatus({ type: 'success' });
      })
      .catch((error) => {
        setStatus({ type: 'error', error });
      });
  };

  return (
    <>
      {status?.type === 'success' && <p>"Twoja wiadomość została wysłana."</p>}
      {status?.type === 'error' && (
        <p>"Wysyłanie wiadomości nie powdioło się. Spróbuj jeszcze raz."</p>
      )}
    </>
  );
}