La pregunta es sobre ocultar un mensaje después de 5 segundos.

En el siguiente código, si hago clic en el botón Generar nombre de sala, se generará la URL en el cuadro de texto. Copiaré esa URL con el botón Copiar y aparecerá el mensaje "Copiado en el portapapeles". Quiero ocultar ese mensaje después de 5 segundos. Por favor, que alguien lo mire.

 import React from 'react'; import FlashMessage from 'react-flash-message' import Iframe from 'react-iframe'; export default class CustomView extends React.Component { constructor(props) { super(props); this.state = { roomname: '', copySuccess: '', enablebutton: true } } makeid() { let r = (Math.random() + 1).toString(36).substring(7); console.log("random", r); this.setState({ roomname: r, enablebutton: false }) } copyToClipboard = (e) => { this.textArea.select(); document.execCommand('copy'); e.target.focus(); this.setState({ copySuccess: 'Copied!' }); }; render() { return ( <div> <button onClick={this.makeid.bind(this)}> Generate RoomName</button> <div style={{ display: "flex", marginLeft: '19%', marginTop: '-2%' }}> <form disabled={this.state.enablebutton}> <textarea style={{ width: "457px", height: "15px" }} disabled={this.state.enablebutton} ref={(textarea) => this.textArea = textarea} value={`https://xxxxxxxxx.azurewebsites.net/?roomname=${this.state.roomname}`}/> </form> { document.queryCommandSupported('copy') && <div disabled={this.state.enablebutton}> <button onClick={this.copyToClipboard}>Copy</button> <p style={{ color: "red" }}> {this.state.copySuccess}</p> </div> } </div> </div> ); } }

Gracias