CSSTransitionGroup key?


(Matt Saunders) #1

I have two components, one is a route and inside the component called by the route, there is another component.

Wrapping the route component is a component, and inside here there is another transition group.

What I’ve noticed is that the nested component does not get enter or leave classes added to it. The docs say:

You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

How can I add a key when it’s just a single element?

Code example:

<CSSTransitionGroup
transitionName="page-transition"
transitionAppear={true}
transitionAppearTimeout={5000}
transitionEnterTimeout={5000}
transitionLeaveTimeout={5000}>

<Route location={location} key={location.key}
exact path="/" component={Dashboard} />

</CSSTransitionGroup>

Below is a part of

<CSSTransitionGroup
    transitionName="test"
    transitionAppear={true}
    transitionAppearTimeout={5000}
    transitionEnterTimeout={5000}
    transitionLeaveTimeout={5000}>
 
        <h1>Hello World</h1>

</CSSTransitionGroup>

So Hello World is not getting the test-enter/leave/active classes. How can I make it get these classes?