ReactCSSTransitionGroup reordering items during removal/addition

Question

I have a Bootstrap list-group with several items in it, and a filter text box. When more than one item is added or removed from the group at the same time, the items get reordered.

In the removal case, all the remaining items are shifted to the top, and the removed items are shifted down for their animation. For example, suppose a list of three items: x, y, and z. The filter suddenly filters out x and z, leaving y in place. Item y gets placed into x's box, x into y's box, and then the second two boxes do their animation.

In the addition case, the items are placed in sorted order, the existing boxes are filled by the first n items of the sorted list, and then the remaining items get animated boxes below it. In our x, y, z list example, suppose x and z are already filtered out, and the only displayed item is y. When the filter is removed, x takes y's box, two boxes are created below and filled with y and z.

Here's a snippet of my code:

render() {
    let tables = this.state.tables;
    let items = [];

    for (let i in tables) {
        let table = tables[i],
            tableName = table.name,
            tableId = encodeURIComponent(tableName.replace(/\s+/g, '-')),
            isTableSelected = this.state.selectedTable && table.name === this.state.selectedTable.name,
            show = tableMatchesFilter(table));

        if (show) {
            items.push(
                <div> {/* wrap in div so we don't have to deal with animating padding */}
                    <ListGroupItem 
                        className={classNames('list-group-item', {'active': isTableSelected })}
                        onClick={this.handleTableSelect.bind(this, tableId)}
                        itemKey={tableId} key={tableId} style={{whiteSpace: 'pre'}}
                        header={tableName}>
                        {table.description}
                    </ListGroupItem>
                </div>
            );
        }
    }

    return ( {/* ... */}
         <div ref='tableListGroup' className='list-group col-xs-12'>
            <ReactCSSTransitionGroup transitionName='tableListGroup'>
                {items}
            </ReactCSSTransitionGroup>
        </div>
        {/* ... */}
    );
}

I'm trying to figure out how to get the items to stay in their boxes and have the correct boxes appear/disappear.

Answer 1

Make sure each div of your items has a unique key attribute.