Remove component after animation played in React - reactjs

Question

I'm using conditional rendering to render a specific button, if the state.show = true.
The problem is, that, if show is not true, the anim is played, but the component is not removed (because the anim doesn't remove the component, it's just animating it.)
i'm using Material ui, aphrodite, react-magic
there's my code :
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '#material-ui/core/Button'
import {StyleSheet, css} from 'aphrodite'
import { swap, vanishOut } from 'react-magic'
import vanishIn from 'react-magic/lib/bling/vanishIn';
const styles = StyleSheet.create({
magic: {
animationName: vanishIn,
animationDuration: '2s'
},
magicOut: {
animationName: vanishOut,
animationDuration: '2s'
}
});
class App extends Component {
constructor(props) {
super(props);
this.state = {show: true};
}
FalseState(){
this.setState({show:false});
}
render() {
const show = this.state.show
let buttonStart;
if(show===true){
buttonStart =
<div className={css(styles.magic)}>
<Button className="start" variant="raised" onClick={() => this.FalseState()}>Button</Button>
</div>;
} else {
buttonStart =
<div className={css(styles.magicOut)}>
<Button className="start" variant="raised" >Button</Button>
</div>;
}
return (
<div className="App">
{buttonStart}
</div>
);
}
}
export default App;

Answer 1

I tried to use another state variable to trigger a unmount of the component after the animation is over - using setTimeout.
Hope this helps :)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '#material-ui/core/Button';
import { StyleSheet, css } from 'aphrodite';
import { swap, vanishOut } from 'react-magic';
import vanishIn from 'react-magic/lib/bling/vanishIn';
const styles = StyleSheet.create({
magic: {
animationName: vanishIn,
animationDuration: '2s'
},
magicOut: {
animationName: vanishOut,
animationDuration: '2s'
}
});
class App extends Component {
constructor(props) {
super(props);
this.state = { show: true, unMount: false };
}
FalseState() {
this.setState({ show: false }, () => {
setTimeout(() => {
this.setState({ unMount: true });
}, 2000);
});
}
render() {
const show = this.state.show;
let buttonStart;
if (this.state.unMount) {
return null;
}
if (show === true) {
buttonStart = (
<div className={css(styles.magic)}>
<Button className="start" variant="raised" onClick={() => this.FalseState()}>
Button
</Button>
</div>
);
} else {
buttonStart = (
<div className={css(styles.magicOut)}>
<Button className="start" variant="raised">
Button
</Button>
</div>
);
}
return <div className="App">{buttonStart}</div>;
}
}
export default App;