What logic should be here?

Question

React

After sending the data to the backend, a response comes from the backend. You need to display this answer for 4-5 seconds. This is how it works on Instagram. Looks like this.

This is the page for sending an email to reset your password.
Question one: Do you think it would be the right decision if I write all this code in the component file?
I have a whole ecosystem to enter and register. Everything works through Redux.
Question two: What logic should be here? Somehow remove the message from the state after 4-5 seconds?

( {this.state.message && <Alert message={this.state.message}/>} )

How would you implement it? The message appears from the bottom of the page, and after a couple of seconds returns to the same place (disappears).
Thanks to!

Answer 1

in the parent element in the state, let it be { showAlert: false, alertMessage: 'blabla' }
<Alert show={this.state.showAlert} />let it be always and by default hidden
when necessary, then

this.setState({ showAlert: true, alertMessage: responseFromServer })
setTimeout( () => setState({ showAlert: false }), 5000 )

well, in the alert itself, let it depend on props.show, a class with css transitions, etc. is added
-
or everything is the same through redux, also with a timeout of 5 seconds, after which the element class changes back to hidden

Answer 2

why don't you use any Toast instead of Alert?
https://github.com/fkhadra/react-toastify