If element has same class after updating state in React.js, animation does not work

Question

I have a simple demo. When you click a box which have find class, i shuffle arr .

If find box is at the same index after shuffled, it seems react does not reset it's class, because animation does't work.

Why and how i can make it work?

JSFIDDLE

Note : Click find box and if find box will be at the same index, you see animation won't work.

Answer 1

This is due the the very nature of what React does. This is actually a wanted behavior: "In case nothing change between the virtual DOM and the real DOM, then we'd better do nothing" :)

When the found index is the same as the previous index, well ... Nothing changes, so React does nothing and the init animation isn't played.

You need to find a way to tell React that something has changed on this element and that it needs to be updated on the DOM. The key property is often to way to do this https://facebook.github.io/react/docs/animation.html