ReactJS Dynamically hiding and showing table column causes Invariant Violation - html

Question

I have a React component for a table. If the user is not me, then when I see that user's profile page, I only see the first three columns of the table. If the user is me, then I see four columns. However, dynamically changing the columns causes the following error:
Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 3 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `.0.1.1.0.0.1.0.0`.
I've looked around a lot and made sure that my table is encased with . How can I allow for this table flexibility in React?
My outer table shell looks like this:
var CategoriesTable = React.createClass({
render: function() {
var includeReps = false;
var repsHeader = '';
if (this.props.currentUser.username === this.props.user.username) {
includeReps = true;
repsHeader = <th>Reps</th>;
}
return (
<div className="categoriesTable panel panel-default">
<CategoriesHeader user={this.props.user} />
<table className="table table-bordered table-striped">
<tbody>
<tr>
<th>Category</th>
<th>Direct Rep</th>
<th>Crowd Rep</th>
{repsHeader}
</tr>
{this.props.user.categories.map(function(category) {
return <CategoriesItem key={category.id} category={category.name} directRep={category.directScore} prevDirectRep={category.previousDirectScore} crowdRep={category.crowdScore} reps={category.reps} includeReps={includeReps} />;
})}
</tbody>
</table>
</div>
);
}
});
Each table row looks like this:
var CategoriesItem = React.createClass({
render: function() {
var reps = this.props.includeReps ? <td>{this.props.reps}</td> : '';
return (
<tr className="categoriesItem">
<td>{this.props.category}</td>
<td><ScoreBar directRep={this.props.directRep} prevDirectRep={this.props.prevDirectRep} category={this.props.category}/></td>
<td>{this.props.crowdRep}</td>
{reps}
</tr>
);
}
});
Why can I do to make React accept these table changes? When I start with the table with all four columns and then switch to a different user's profile page, the fourth table data piece becomes a

Answer 1

Perhaps a hack, but giving a react component a key will force the entire component to re-render when the key changes. If each profile page gives the table a unique key, then this problem goes away.