React.JS Tip: Automatically Make Alerts Disappear in 2 Seconds!

Question

React.JS Tip: Automatically Make Alerts Disappear in 2 Seconds!

How can I make my alert automatically disappear after 2 seconds in React.JS? Currently, the alert only disappears when I manually close it using the fecharAlerta props function.

import { useEffect } from "react"
import { useState } from "react"
import { FaCheck, FaExclamationTriangle, FaInfo, } from "react-icons/fa"
import { HiX } from "react-icons/hi"
import "./css/alerta.css"
function Alerta({ tipo, mostrar, mensagem, fecharAlerta }) {
    const [cor, setCor] = useState()
    useEffect(function () {
        if (tipo === "sucesso") {
            setCor("rgb(74, 112, 74)")
        }
        if (tipo === "erro") {
            setCor("rgb(138, 67, 67)")
        }
        if (tipo === "info") {
            setCor("rgb(185, 184, 93)")
        }
    }, [tipo])
    if (mostrar === true) {
        // Code to make alert disappear after 2 seconds goes here
        return (
            <div className="alerta" style={{ backgroundColor: cor }}>
                {tipo === "sucesso" &&
                    <FaCheck className="icon" />
                }
                {tipo === "erro" &&
                    <FaExclamationTriangle className="icon" />
                }
                {tipo === "info" &&
                    <FaInfo className="icon" />
                }
                <span className="titulo">{mensagem}</span>
                <div><button className="fechar-btn" onClick={fecharAlerta}><HiX /></button></div>
            </div>
        )
    }
    else {
        return null
    }
}
export default Alerta

javascript jquery css reactjs react-hooks

Answer 1

Answer №1

To implement the dismissal feature, a new useEffect hook is utilized.

In the updated code, the second useEffect hook handles setting up a timeout when the component is mounted. It employs the setTimeout function to schedule the execution of the fecharAlerta callback after 2000 milliseconds (2 seconds). This ensures that the alert will automatically close after the specified time duration.

In order to clean up the timeout and prevent any memory leaks, the useEffect hook returns a cleanup function which invokes clearTimeout with the reference to the timeout. This guarantees that the timeout is cleared if the component gets unmounted.

import { useEffect, useState } from 'react';
import { FaCheck, FaExclamationTriangle, FaInfo, } from 'react-icons/fa';
import { HiX } from 'react-icons/hi';
import './css/alerta.css';

function Alerta({ tipo, mostrar, mensagem, fecharAlerta }) {
  const [cor, setCor] = useState();

  useEffect(() => {
    if (tipo === "sucesso")
      setCor("rgb(74, 112, 74)");
    else if (tipo === "erro")
      setCor("rgb(138, 67, 67)");
    else if (tipo === "info")
      setCor("rgb(185, 184, 93)");
  }, [tipo]);

  useEffect(() => {
    const timeout = setTimeout(fecharAlerta, 2000);
    return () => clearTimeout(timeout);
  }, [fecharAlerta]);

  return mostrar ? (
    <div className="alerta" style={{ backgroundColor: cor }}>
      {tipo === "sucesso" ? <FaCheck className="icon" /> : null}
      {tipo === "erro" ? <FaExclamationTriangle className="icon" /> : null}
      {tipo === "info" ? <FaInfo className="icon" /> : null}
      <span className="titulo">{mensagem}</span>

      <div>
        <button className="fechar-btn" onClick={fecharAlerta}>
          <HiX />
        </button>
      </div>
    </div>
  ) : null;
}

export default Alerta

Answer 2

To implement the dismissal feature, a new useEffect hook is utilized.

In the updated code, the second useEffect hook handles setting up a timeout when the component is mounted. It employs the setTimeout function to schedule the execution of the fecharAlerta callback after 2000 milliseconds (2 seconds). This ensures that the alert will automatically close after the specified time duration.

In order to clean up the timeout and prevent any memory leaks, the useEffect hook returns a cleanup function which invokes clearTimeout with the reference to the timeout. This guarantees that the timeout is cleared if the component gets unmounted.

import { useEffect, useState } from 'react';
import { FaCheck, FaExclamationTriangle, FaInfo, } from 'react-icons/fa';
import { HiX } from 'react-icons/hi';
import './css/alerta.css';

function Alerta({ tipo, mostrar, mensagem, fecharAlerta }) {
  const [cor, setCor] = useState();

  useEffect(() => {
    if (tipo === "sucesso")
      setCor("rgb(74, 112, 74)");
    else if (tipo === "erro")
      setCor("rgb(138, 67, 67)");
    else if (tipo === "info")
      setCor("rgb(185, 184, 93)");
  }, [tipo]);

  useEffect(() => {
    const timeout = setTimeout(fecharAlerta, 2000);
    return () => clearTimeout(timeout);
  }, [fecharAlerta]);

  return mostrar ? (
    <div className="alerta" style={{ backgroundColor: cor }}>
      {tipo === "sucesso" ? <FaCheck className="icon" /> : null}
      {tipo === "erro" ? <FaExclamationTriangle className="icon" /> : null}
      {tipo === "info" ? <FaInfo className="icon" /> : null}
      <span className="titulo">{mensagem}</span>

      <div>
        <button className="fechar-btn" onClick={fecharAlerta}>
          <HiX />
        </button>
      </div>
    </div>
  ) : null;
}

export default Alerta

React.JS Tip: Automatically Make Alerts Disappear in 2 Seconds!

Answer №1

Similar questions

Having difficulty retrieving the user list from Firebase within Angular 6

Having trouble with axios calls being caught in the catch block when mocking it in Jest

What is causing the regular expression to fail when using the OR operator?

Display or conceal objects within a 3D model with an HTML checkbox

Spinning points about a center point

Is it possible to modify styling programmatically in a React Native application?

Please ensure that there is a minimum of one checkbox with nested names

What is the best way to send props and trigger a function with a single onclick event?

No matter how many times I modified the code in the ReactDOM.render() method within my index.js file, the end result remained unchanged

Issue with IE6: Div inside Anchor element causing inline images to not be clickable links

Is there a way for me to record the variable's name instead of its linked data?

Issues arise when attempting to toggle the Angular Bootstrap 4 navbar, along with challenges related to the navbar-dark feature

Transferring a variable from template.php to a javascript file

Extracting individual elements from an array with Node.js or JavaScript

What methods can be used to extract an element's contents prior to its attachment?

Ensure consistency of wrapper height across various browsers

Issue with React Portal not rendering children within a functional component

Best practices for incorporating JavaScript into Angular applications

Ensuring correct association of values to avoid redundancies

Timeout causes failure in AngularJS jasmine promise testing