Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Installing and Using ReactCSSTransitionGroup

Fabio Picciau
Fabio Picciau
5,923 Points

Shouldn't it be updated to react-transition-group?

this set of video are several months old, the react-addons-transition-group shouldn't be used anymore, in its place there the new react-transition-group with slightly different imports

import Transition from 'react-transition-group/Transition';
import TransitionGroup from 'react-transition-group/TransitionGroup';

or even

import { CSSTransition, TransitionGroup } from 'react-transition-group';

2 Answers

This video should really be redo. The changes made to the library do make it slightly more complicated to follow along using the old libraries.

PS: Yes I know you can simply use the old "drop-in" library, but it would be nice for this video to be updated.

Some import details to help people trying to do this on this video.

Step 1: change the import to

import { CSSTransition, TransitionGroup } from 'react-transition-group';

Step 2: Replace the ul tag with the follow. We will add CSSTransition in the next step.

<TransitionGroup component="ul">
  {guests} 
</TransitionGroup>

Step 3: Adding CSSTransition. In this step you will find the code that generates our guests. In the map function wrap the li tags with a CSSTransition as in my example below

<CSSTransition component="li" key={name.name}
timeout={500}
classNames="slide">
  <li>
    {name.name}
    <button onClick={this.handleRemove.bind(this, index)}>Remove</button>
  </li>
</CSSTransition>
Ryan Oldford
Ryan Oldford
11,992 Points

To make this new addon as compatible with the videos, use the 1.x versions. They're designed to be a "drop-in" replacement. I used them and only had to change the imports slightly.

More info can be found at https://github.com/reactjs/react-transition-group/tree/v1-stable