Is it possible to slowly hide a component in reactjs? something like fadeout?

Question

I had to show a success message after a server operation, such as a successful deletion or edit. now, what i did was to change state of 'show' to true and then after 2 seconds I change the state to false and the component gets hidden. the problem is that it looks very sudden and I want to slow it down a bit, so it feels like it is fading out.

So, how does one do that in react? example code of what I am doing

this.state.showAlert?<Alert message="success" />:''

how do I make this process a little slower?

Answer 1

Use ReactCSSTransitionGroup for this type of need