Reactjs: remove array element, element states don't follow

Question

Not sure how to word this question properly in the title.

Scenario: React app displays an array of 3 Elements (dropdowns), closed by default.

I open the second dropdown:
0: state.isOpen: closed
1: state.isOpen: open
2: state.isOpen: closed

I remove the FIRST element of the array:
0: state.isOpen: closed
1: state.isOpen: open

Weird, because i expect the the new first element to be open and the second to be closed. It appears the states don't follow the elements (eg. second element state will go to the new second elemenet state after removal). I tried not mutating the array, but instead creating a new one and using that to setstate, but same result.

I expect the new [0] to be open and [1] to be closed. How do i do that? Thanks.

//Accounts.js:
accounts.map( () => { return <Account/>})
removeAccount = () => {
    let accounts = this.state.accounts.map(item => return item)
    accounts.splice...
    this.setState({accounts: accounts})
}

//Account.js:
state.isOpen
removeAccount = this.props.removeAccount

Fixed it. The reason was because i used the index as the unique key for each element. Using something else (eg. unique name) for the key resolved this issue. Thanks. — goldensausage
– goldensausage, Commented Dec 19, 2017 at 20:13

klugjo · Accepted Answer · 2017-12-19 04:14:54Z

1

I think your are not cloning your array properly:

removeAccount = () => {
    let accounts = [...this.state.accounts]; // Cloning first
    accounts = accounts.map(item => return item) // Do your mappings here
    accounts.splice... // Do your modifications here
    this.setState({accounts: accounts}); // Set the new state 
}

edited Dec 19, 2017 at 4:14

answered Dec 19, 2017 at 4:04

klugjo

21k10 gold badges65 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

goldensausage Over a year ago

sorry i corrected my code. I did accounts = state.accounts.map... and then edited the accounts. And i still get the same bizarre behavior

klugjo Over a year ago

map does not clone the array, I have edited my answer

score 1 · Accepted Answer · 2017-12-19 04:34:33Z

1

You can leverage Array.prototype.slice() to return a brand new array that excludes your first element without touching anything else.

See below for a practical example.

removeAccount = () => {
  return this.setState((state) => {accounts: [...state.accounts.slice(1)]})
}

edited Dec 19, 2017 at 4:34

answered Dec 19, 2017 at 4:18

user9116119

1 Comment

goldensausage Over a year ago

Tried it, does not fix the issue. I already confirmed that using a brand new array will not resolve it.

Collectives™ on Stack Overflow

Reactjs: remove array element, element states don't follow

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related