Tengo un componente que después de que un usuario haya hecho clic en el botón, aparece un mensaje y debería desaparecer después de 3 segundos. Estoy tratando de usar useEffect para habilitar el tiempo de espera, pero no puedo hacerlo funcionar:
const { useState, useEffect } = React const SectionHeader = (props) => { const {title, button, link, type} = props; const [copy, setCopy] = useState(false) const [showMessage, setShowMessage] = useState(true); useEffect(() => { setTimeout(() => { setShowMessage(false) }, 3000) }, []) const copyToClipboard = (title) => { navigator.clipboard.writeText(window.location.href + '#' + title.toLowerCase().replaceAll(" ", "-").replaceAll("'", "")) setCopy(true) } return ( <div id={title.toLowerCase().replaceAll(" ", "-").replaceAll("'", "")}> <b>{title}</b> <div onClick={() => copyToClipboard(title)}>Copy to clipboard</div> {copy ? 'copied' : ''} </div> ) } ReactDOM.render(<SectionHeader title="Test" />, document.getElementById("root")) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root">useEffect ejecuta el código escrito en su bloque solo cuando el sitio web se carga por primera vez o cuando las dependencias cambian.
En su código no ha incluido ninguna dependencia, por lo que solo ejecutará el código envuelto dentro de su bloque cuando el sitio se cargue por primera vez.
useEffect(() => { setTimeout(() => { setShowMessage(false) }, 3000) }, [here should be some state which changes when a button got clicked])