Q:

FadeIn and FadeOut effect using React JS

I have something like this :
var Hello = React.createClass({
    getInitialState: function(){
    return {
        opacity: 0
    }
  },

  handleClick: function(event){
    event.preventDefault();
    this.setState({opacity: 1});
  },

  render: function() {
    return <div>
        <div style={{opacity: this.state.opacity, transition: "opacity 1s"}}>Test</div>
      <a href="" onClick={this.handleClick}>Click</a>
    </div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Here is jsfiddle
I want that div with text test within doesn't shows up on page load. Then if I click on the link that that div shows up. That is what this example do.
But I want that after the div shows up after the click, a few seconds later it disappears again. (I need somehow set opacity to 0 again).
Any advice?

A:

You can add the FadeOut effect passing a callback function to setState().
A simple solution would look like this
handleClick: function(event){
    event.preventDefault();
    this.setState({opacity: 1}, () => setTimeout(() => this.setState({opacity:0}),4000)); 
},

jsfiddle
A better one would be
handleClick: function(event){
    event.preventDefault();
    this.setState({opacity: 1}, () => {
        if(!this.timeout)
            clearTimeout(this.timeout);
        this.timeout = setTimeout(() => this.setState({opacity:0}),4000);
 });

jsfiddle

