How to show notification in React for 3 seconds and hide?

Question

JavaScript

The usual question is, I do a program like tinder and when you put a like, you just need to show a notification or animation for a few seconds that the like has been made. How can this be implemented?

Answer 1

to trigger a notification, you add a checkbox in the state of the type in the parent component:

this.state = {
    isAlertVisible: false
}
// ...
<Alert isVisible={this.state.isAlertVisible} />

Accordingly, on some event you make this flag true. Alternatively, you can write setTimeout in the same handler, which will change it back to false

handleClick = event => {
    // ...
    this.setState({isAlertVisible: true}, () => {
        setTimeout(
            () => {this.setState({isAlertVisible: false})}, 
            3000
        )
    })
}

Do not forget that setState is an asynchronous function, so I put the timer in a callback