ReactJS error when using animations

Question

I have a working ReactJS app and I am attempting to use animations (https://facebook.github.io/react/docs/animation.html)

I am trying to apply the transition animation to table rows as they are added. The existing working render looks like this:

return React.DOM.tbody({ valign: 'top' }, rows);

I have tried switching to this:

return React.DOM.tbody({ valign: 'top' }, React.createElement(ReactCSSTransitionGroup, {transitionName: "example"}, rows));

But I am now getting a warning and an error in the console:

React attempted to use reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server.

Error: Invariant Violation: ReactMount: Root element ID differed from reactRootID.

Any ideas?

Robin Elvin · Accepted Answer · 2015-03-09 15:44:51Z

1

I missed something obvious. The docs say:

By default ReactTransitionGroup renders as a span

So it was creating invalid markup within the table. I have set the component= property to "tr" which now works.

answered Mar 9, 2015 at 15:44

Robin Elvin

1,26512 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS error when using animations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related