Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition problem in code at http://facebook.github.io/react/docs/animation.html #853

Closed
jkleiser opened this issue Jan 9, 2014 · 1 comment

Comments

@jkleiser
Copy link

jkleiser commented Jan 9, 2014

This may not be the right place, but when I try the code at http://facebook.github.io/react/docs/animation.html, the 'leave' transition is always applied to the last word, even when I click to remove a word further up. You may try it here: https://dl.dropboxusercontent.com/u/48186945/web/react/reactTransitions.html
I believe that the problem has not been introduced by me when I have copied the code from the React page.

@zpao
Copy link
Member

zpao commented Jan 9, 2014

Thanks for the report. That's definitely a bug in the example code.

The problem is that we're using the index in the array for key, which isn't consistent for items across passes when you don't remove the last time. You can instead use the text of each item as the key, at least for the small demo. If you ever have 2 items in the array that have the same text, you'll run into a different set of issues.

See http://jsfiddle.net/zpao/U6u4K/ where I have it working correctly.

@zpao zpao closed this as completed in d8e9eb9 Jan 29, 2014
jjt pushed a commit to jjt/react that referenced this issue Jan 31, 2014
key should never be index into an array or there are bugs. Especially in
transitions.

Fixes facebook#853
zpao added a commit that referenced this issue Feb 2, 2014
key should never be index into an array or there are bugs. Especially in
transitions.

Fixes #853
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

No branches or pull requests

2 participants