Why is ReactCSSTransitionGroup not working?

Question

React

I stupidly copied the code from the documentation:

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const Cart = (props) => {
...

    return (
            <section className="cart">
                {items.map(item =>
                    <ReactCSSTransitionGroup
                        transitionName="example"
                        transitionEnterTimeout={5000}
                        transitionLeaveTimeout={3000}>
                    <CartItem key={item.id} item={item} />
                    </ReactCSSTransitionGroup>
                )}
            </section>

    );
};

And as a result, a simple span element appears around the CartItem, without classes. All. Then it disappears when I delete the CartItem

Answer 1

You don't need to wrap every element in a ReactCSSTransitionGroup.
Try like this:

return (
  <ReactCSSTransitionGroup
    component="section"
    className="cart"
    transitionName="example"
    transitionEnterTimeout={5000}
    transitionLeaveTimeout={3000}
  >
    {items.map(item => <CartItem key={item.id} item={item} />)}
  </ReactCSSTransitionGroup>
);

and, of course, you must have css example-enter and example-leave described, as in the documentation