I have an alert for onclick event. But I want alert to last for two seconds and close automatically after 2 second. How can I set time out for alert in reactJS?

const handleHide1 = () => this.setState({ show1: false });
const handleShow1 = () => this.setState({ show1: true });

return(
<div>
<Alert show={this.state.show1} variant="success" style={{marginTop:'2%'}} onHide={this.handleHide1} >
<Alert.Heading closeButton>Order Accepted
<button type="button" class="close" onClick={handleHide1} aria-label="Close">
<span aria-hidden="true">&times;</span></button>
</Alert.Heading>                  
<p>Thank you for Accepting Order. We will inform the customer</p>
</Alert>

<Button variant="outline-success" onClick={()=>{handleShow1}>Accept</Button>

I have an alert for onclick event. But I want alert to last for two seconds and close automatically after 2 second. How can I set time out for alert in reactJS?

const handleHide1 = () => this.setState({ show1: false });
const handleShow1 = () => this.setState({ show1: true });

return(
<div>
<Alert show={this.state.show1} variant="success" style={{marginTop:'2%'}} onHide={this.handleHide1} >
<Alert.Heading closeButton>Order Accepted
<button type="button" class="close" onClick={handleHide1} aria-label="Close">
<span aria-hidden="true">&times;</span></button>
</Alert.Heading>                  
<p>Thank you for Accepting Order. We will inform the customer</p>
</Alert>

<Button variant="outline-success" onClick={()=>{handleShow1}>Accept</Button>

• javascript
• reactjs

• Hi @madhav koirala, I've just provided an answer for you. Let me know if you have any questions. – Cat_Enthusiast Commented Apr 28, 2019 at 10:02

1 Answer 1

Something like this? :

const handleShow1 = () => {
  this.setState({
     show1: true
  })

  setTimeout(() => {
     this.setState({
         show1: false
     })
  }, 2000)

}

Also here's a sandbox I made for you to get a good idea of it: https://codesandbox.io/s/2w03nvvjnp