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 trialFabio Picciau
5,923 PointsShouldn'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
Robert McIntosh
1,645 PointsThis 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
11,992 PointsTo 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