Is it possible to set a CSSTransitionGroup on 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 a CSSTransitionGroup to set the background color of a td when one of the props is updated, like so:

<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 here is that the ReactCSSTransitionGroup renders as a span, which is not a valid child of a table row. So is it possible with React to set enter/leave animations on table cells?

Answer 1

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

http://facebook.github.io/react/docs/animation.html#rendering-a-different-component

If that doesn't work I'd recommend not using a table and using divs instead, perhaps with display: table / table-row / table-cell.