Wrong item deleted from array

Question

I have a component that contains an array of items in its state, but whenever I try to delete an item, the wrong one is deleted.

Here's a simplified version of my parent Component:

export default class BankList extends Component {
    state = {
        banks: [new Bank("Name1"), new Bank("Name2")]
    }

    addBank() {
        this.setState({banks: [...this.state.banks, new Bank("")]})
    }

    removeBank(index) {
        let good = [];
        this.state.banks.forEach((item, ind) => {
            if(ind !== index){
                good.push(item);
            }
        });
        this.setState({banks: good}); 
    }

    render() {
        return (
            <Container>
                <Content>
                    <List>
                        {this.state.banks.map((bank, index) => <BankContainer bank={bank} key={index} id={index} onRemove={() => this.removeBank(index)}/>)}
                    </List>
                    <Content>
                        <Right>
                            <Button onPress={() => this.addBank()}>
                                <Text>Add Bank</Text>
                            </Button>
                        </Right>
                    </Content>
                </Content>
            </Container>
        )
    }
}

The BankContainer class simply shows the Bank, and when the "remove" button inside it is pressed, it will call onChange with the provided id. I have verified that the right index is being passed into removeBank. But, after removeBank executes, the last item (index 1) is removed from the banks array, when I selected the first one (index 0). I have tried the following method bodies in removeBank, but to no avail:

Tried a shallow copy:

let old = [...this.state.banks];
old.filter((item, ind) => ind !== index);
this.setState({banks: old});

Tried a straight filter:

this.setState({banks: this.state.banks.filter((item, ind) => ind !== index);

Tried a deep copy:

let old = [...this.state.banks];
old = old.map(i => Object.assign({}, i));
old.filter((item, ind) => ind !== index);
this.setState({banks: old});

Tried a splice:

this.setState({banks: this.state.banks.splice(index, 1)});

Tried a shallow copy and splice:

let old = [...this.state.banks]
old = old.splice(index, 1);
this.setState({banks: old});

Tried a deep copy and splice:

let old = [...this.state.banks];
old = old.map(i => Object.assign({}, i));
this.setState({banks: old.splice(index, 1)})

None of these have worked, they have all exhibited the same behavior. I'm at my wits end on this, any suggestions would be hugely appreciated!

Answer 1

According to the docs :

We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Using a stable ID, and using that to remove elements from the array, should solve your issues.