CODEWITHSUNDEEP
javascriptanimationreactjs
Robin Elvin
Robin Elvin

Reputation: 1255

ReactJS error when using animations

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?

Upvotes: 1

Views: 264

Answers (1)

Robin Elvin
Robin Elvin

Reputation: 1255

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.

Upvotes: 1

Related Questions