Tengo un formulario en mi sitio web que se conecta a una base de datos back-end, para que los usuarios puedan ingresar su información de contacto. Quiero que los usuarios sean validados con un mensaje flash "Usted ha sido agregado" cuando se agrega su información. Tengo todo configurado con CSS (los componentes del mensaje flash se iluminan durante 5 segundos cuando se carga la página), pero parece que no puedo hacer que aparezca el mensaje cuando se envía el formulario.

Componente de formulario:

 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;

El componente de mensaje flash:

 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;