ReactJS: Fade in div and fade out div based on state

Question

So, I am trying to fade in and fade out a set of inputs based on what button the user clicks. I tried using jQuery, but, the div was fading in and fading out at the same spe

Answer 1

You could also achieve this with CSSTransitionGroup

const Example = ({items, removeItemHandler}) => {
  return (
    

      
        {this.renderInputs().map(function(input) {
          return (
            

              {item.name}
            
          );
        })}
      
    
  );
};

When working with React, sometimes you want to animate a component directly after it has been mounted, or directly prior to it being unmounted. Like in your example, Let’s say you map over an array of objects and render a list in your application. Now let’s say you want to add animations to fade-in new items that have been added to the array or fade-out items as they are removed from the array. The CSSTransitionGroup component takes in transitionEnterTimeout and transitionLeaveTimeout as props. What these values represent are the duration in milliseconds of your enter and leave transitions.