React - state contains array of objects. setState with conditional

Question

I'm getting an error that 'exampleState' is not iterable, but why?

Say that I have a state variable which holds a simple array of objects

const [exampleState, setExampleState] = useState([
    {
        id: 1,
        name: 'John'
    },
    {
        id: 2,
        name: 'Mary'
    }
])

I want to change the values of these objects conditionally. I thought a loop with a conditional inside would be an easy way to do this. I tried the following...

for (let item of exampleState) {
    if (item.name === 'John') {
        setExampleState({...exampleState, name: 'Michael'})
    }
}

but I get the following error: 'TypeError' exampleState is not iterable

How should I do this instead?

You should be able to do for ... in instead of for ... of here I think and the rest should just work. — Webber
– Webber, Commented Jun 16, 2022 at 21:17

Clio Orgyán · Accepted Answer · 2022-06-16 21:15:51Z

1

Firstly, the usual way to go about this, in general, is to update the state the least times you need to. Secondly, you are trying to update the value of the state with an object, whereas it is a list when it's initialized. This can be achieved using a single update:

setExampleState(...exampleState.map((user) => {
  if (user.name === 'John') {
    user.name = 'Michael';
  }
  return user;
}));

answered Jun 16, 2022 at 21:15

Clio Orgyán

3092 silver badges10 bronze badges

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

Comments

R4ncid · Accepted Answer · 2022-06-16 21:13:22Z

1

you can use map for that like this

setExampleState(state => state.map(s => s.name === 'John'?{...s, name:'Michael' }: s))

if you set the state in a loop you always overwriting your array with a single element

answered Jun 16, 2022 at 21:13

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Comments

erkan · Accepted Answer · 2022-06-16 21:20:12Z

0

You should check immer library, it is awesome for operating immutable data structures like that.

answered Jun 16, 2022 at 21:20

erkan

2421 silver badge5 bronze badges

Collectives™ on Stack Overflow

React - state contains array of objects. setState with conditional

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related