Skip to content

Conversation

shelldandy
Copy link
Contributor

@shelldandy shelldandy commented Mar 7, 2019

Fixes #466

You don't always have the children of TransitionGroup mapped sometimes you want to render one at a time (eg image carousel) so it took me a while to figure out they need to have a key prop even when just rendering a single one by going to the source and reading this:

https://github.com/reactjs/react-transition-group/blob/master/src/utils/ChildMapping.js#L3-L19

So now im sending this PR with those insights so its easier for people to know about this

I made a small working example with styled-components

https://github.com/shelldandy/styled-transitions-example/blob/master/pages/index.js#L115-L121

Copy link
Collaborator

@silvenon silvenon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always considered it kind of a hack to use a single child in TransitionGroup and modifying its key because then it's not a group (like the name implies). Instead you're just tricking TransitionGroup into thinking that it's a different element. But I'm fine with this until we potentially come up with a better API, I'd just like to make this more explicit in the documentation by explaining this technique.

@silvenon silvenon merged commit c73de46 into reactjs:master Mar 14, 2019
@silvenon
Copy link
Collaborator

silvenon commented Mar 14, 2019

Thanks! The tests failing is just Jest's incompatibility with Node v11.11, nothing to worry about. jestjs/jest#8069

@jquense
Copy link
Collaborator

jquense commented Mar 14, 2019

🎉 This PR is included in version 2.6.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@shelldandy shelldandy deleted the transition-more-docs branch March 14, 2019 20:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants