Is it possible to set the CSSTransitionGroup in a table cell in ReactJS?

Question

Consider this JSX structure:

<table> <tbody> <tr> <td>{this.props.firstName}</td> <td>{this.props.lastName}</td> </tr> </tbody> </table> 

I would like to use CSSTransitionGroup to set the background color td when updating one of the details:

 <table> <tbody> <tr> <ReactCSSTransitionGroup transitionName="example"> <td key={this.props.firstName}>{this.props.firstName}</td> </ReactCSSTransitionGroup> <td>{this.props.lastName}</td> </tr> </tbody> </table> 

The problem is that ReactCSSTransitionGroup displays as a span, which is not a valid child of a table row. So is it possible to use React to set the input / lowering animation on table cells?

Answer 1

React CSS Transitions can be specified to use a container element other than span if you want using the component property.

http://facebook.imtqy.com/react/docs/animation.html#rendering-a-different-component

If this does not work, I would recommend not using a table and instead using divs, perhaps with the display: table / table-row / table-cell.