Как показать уведомление на React на 3 секунды и скрыть?

Question

[aliekoff]

Обычный вопрос, делаю прогу типа тиндера и когда ставишь лайк, нужно просто показать уведомление или анимацию на несколько секунд, что лайк был сделан. Как это можно реализовать ?

Answer 1

[shsv382]

чтобы вызвать уведомление, ты в вышестоящем компоненте добавляешь флажок в state типа:

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

соответственно, по какому-то событию ты делаешь этот флажок true. Как вариант, можно в этом же обработчике запилить setTimeout, который будет менять его обратно на false

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

Не забудь, что setState - асинхронная функция, поэтому таймер я засунул в коллбэк