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 modo 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=";>
                <img id="fb" src={Facebook} alt="Facebook" />
            </a>
            <a href=";>
                <img id="insta" src={Instagram} alt="Instagram" />
            </a>

        </div>

    )
}


export default Kontakt; 

And the error I get:

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

What am I missing?

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 modo 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.">
                <img id="fb" src={Facebook} alt="Facebook" />
            </a>
            <a href="https://instagram.">
                <img id="insta" src={Instagram} alt="Instagram" />
            </a>

        </div>

    )
}


export default Kontakt; 

And the error I get:

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

What am I missing?

• javascript
• reactjs

• You have not defined success and error so you are getting this error. Put success and error in state. Change the value of these depending upon the result of your API call – Sayog Commented Feb 26, 2021 at 14:11

1 Answer 1

Main problem that throws pilation 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>
      )}
    </>
  );
}