Tab position not updating when component is removed from render

[brandonmp]

Problem description

This happens when rendering an array of <Card>s with nested <Tab>s.

Let's say I have an array of 10 cards, each w/ tabs, which I render via a .map() call. I also have filter toggles that add/remove cards.

If I click on the second tab of the first card, then toggle a filter that makes that card disappear, the new first card shows up with tab 2 active.

The data for the card is correct--title, picture, etc., but the tab position is leftover from the previous #1 card.

This is the case both with and without controlled tabs.

Steps to reproduce

create a series of cards (with nested <Tabs>) via .map()

create a state-driven filter

Pick a non-default tab on the first card

Apply filter that removes 1st card

New first card should be stuck on the tab you picked before filtering

Versions

• Material-UI: 0.15.3
• React: 15.2.0
• Browser: Chrome, firefox, latest versions

[brandonmp]

Turns out I was using index for a key, which isn't a value that's unique to the item in the array, so sort etc. got things all mixed up.