Pop up message when form is submitted-CodePudding

I have a form on my website that connects to a backend DB-- so users can input their contact information. I want the users to be validated with a "You have been added" flash message when their information is added. I have everything set up with CSS (the flash message components lights up for 5 seconds when the page is loaded) but I can't seem to get the message up to pop up when the form is submitted.

Form component:

import React, { useState } from "react";
import Axios from "axios";
import "./form.css";
import FlashMessages from "../flashMessages";

function ContactInput(props) {
  const [username, setUsername] = useState();
  const [email, setEmail] = useState();
  //const [password, setPassword] = useState();

  async function handleSubmit(e) {
    e.preventDefault();
    try {
      await Axios.post("(URLOFMYBACKENDAPIDB)/register", { username, email, password: "********" });
      console.log("user was successfully created");
    } catch (e) {
      console.log("there was an error");
    }
  }

  return (
    <div className="mainDiv">
      <form onSubmit={handleSubmit}>
        <div className="inputDiv">
          <label>Name</label>
          <input className="inputField" onChange={e => setUsername(e.target.value)} type="text" name="username"></input>
        </div>
        <div className="inputDiv">
          <label>Email</label>
          <input className="inputField" onChange={e => setEmail(e.target.value)} type="text" email="Email"></input>
        </div>
        {/*   <div>
          <label>Password </label>
          <input onChange={e => setPassword(e.target.value)} type="text" email="email"></input>
        </div>
  */}
        <div>
          <input type="submit" className="inputButton" value="Submit"></input>
        </div>
      </form>
      <FlashMessages />
    </div>
  );
}

export default ContactInput;

The flash message component:

import React from "react";

function FlashMessages() {
  return (
    <div className="floating-alerts">
      <div className="alert alert-success text-center floating-alert shadow-sm">You have been successfully added!</div>
    </div>
  );
}

export default FlashMessages;

CodePudding user response：

React has a useState hook , in your example using it could look like this:

// On top of the Component
const [flashMessage, setFlashMessage] = useState(false);

// Submit method
async function handleSubmit(e) {
    e.preventDefault();
    try {
      await Axios.post("(URLOFMYBACKENDAPIDB)/register", { username, email, password: "********" });
      console.log("user was successfully created");
      setFlashMessage(true);
    } catch (e) {
      console.log("there was an error");
    }
  }

In the render tree you would check if flashMessage is true and then render the component:

{flashMessage? <FlashMessage /> :null}

CodePudding user response：

You basically need to set a state for tracking the success of login

const [flashMessage, setFlashMessage] =  useState(false)

keep it false so flashmessage does'nt appear from start

and you can set the state, flashMessage to true when user login successfully

async function handleSubmit(e) {
e.preventDefault();
try {
  await Axios.post("(URLOFMYBACKENDAPIDB)/register", { username, email, 
   password: "********" });
  console.log("user was successfully created");
  setFlashMessage(true)
} catch (e) {
  console.log("there was an error");
}

}

and then in your code render the flashmsg this way

{ flashMessage ? <FlashMessages /> : "" }