The question is about hiding a message after 5 seconds.
In the code below, if I click on the Generate Room Name button , it will generate the url in the textbox. I will be copying that url using the Copy button and a "Copied to clipboard" message will be displayed. I want to hide that message after 5 seconds. Please someone look into it.
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>
);
}
}
Thanks
It's enough to clear the copySuccess state after 5000 ms:
copyToClipboard = (e) => {
this.textArea.select();
document.execCommand('copy');
e.target.focus();
this.setState({ copySuccess: 'Copied!' }, () => setTimeout( () => this.setState({ copySuccess: '' }) ,5000));
};
Modify your copyToClipboard function like this:
copyToClipboard = (e) => {
this.textArea.select();
document.execCommand('copy');
e.target.focus();
this.setState({ copySuccess: 'Copied!' });
setTimeout(() => {
this.setState({ copySuccess: '' });
}, 5000);
};
for more info visit here