How to update nested array in React state?

Question

I am trying to update my state so that a nested array gets emptied but the rest of the state stays the same.

My state object looks like:

this.state = {
    data: {
        type: "FeatureCollection",
        features: [1,2,3,4]
    }
}

And I the closest I get to working is:

this.setState(prevState => ({
    data: [...prevState.data, (this.state.data.features.length = 0)]
}));

The console warning I get with this approach is:

Do not mutate state directly. Use setState()  react/no-direct-mutation-state

But how else is this possible?

Many thanks :)

what are you trying to update ? Are you making the array empty? — Sarun UK
– Sarun UK, Commented Nov 18, 2020 at 15:17
@WillJenkins How do you know that's not in the constructor? I think it is the inner of setState. — Brian Thompson
– Brian Thompson, Commented Nov 18, 2020 at 15:19
@BrianThompson - it tells you to "Use setState()", which you are doing — Will Jenkins
– Will Jenkins, Commented Nov 18, 2020 at 15:19
But there is also a direct assignment to this.state.xx which seems more likely to be the problem. — Brian Thompson
– Brian Thompson, Commented Nov 18, 2020 at 15:20

Brian Thompson · Accepted Answer · 2020-11-18 15:21:00Z

2

The first problem I see with your code is you're changing data from an object to an array. So it should as least be

this.setState(prevState => ({
  data: {...prevState.data, (this.state.data.features.length = 0)}
}));

Then you're still mutating state by doing this.state.data.features.length = 0, so to fix that, you need to update that array immutably:

this.setState(prevState => ({
  data: {
    ...prevState.data, 
    features: [] // Or whatever you need your new array to be
  }
}));

So say you wanted to add another element to the end, you could do:

this.setState(prevState => ({
  data: {
    ...prevState.data, 
    features: [...prevState.data.features, 5]
  }
}));

answered Nov 18, 2020 at 15:21

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

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

Comments

Sarun UK · Accepted Answer · 2020-11-18 15:20:19Z

1

You should update the state like this. data in the state is an object, not an array.

this.setState(prevState => ({
    data: {...prevState.data, features: [] }
}));

answered Nov 18, 2020 at 15:20

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges