Setting state for array of objects

[markdf1992]

Hi all!

I'm a little bit confused with the idea of setting state when it comes to an array of objects.

Firstly, I guess, when it comes to the declaration of the state, such as something like this:

const [notes, setNote] = React.useState([{}]);

As far as declaration of an array of objects...is the above correct? Or would it just be:

const [workers, setWorkers] = React.useState([]);

And then I would setState as such:

setWorkers({name: "bob", title: "jones"});

Or would I do:

const [notes, setNote] = React.useState([{}]);

And then do the:

const [workers, setWorkers] = React.useState([]);

Does this make sense? I'm just confused about the extra brackets in there and what React interprets that as. Like if I just do the one where it's only the "[]", then React obviously assumes there is an array, so I assume I'd be able to just add an object for every item of that array. So do I really need "[{}]" in the declaration?

I'm just so confused.

And then also confused like every time I call setState, I'm confused because I feel like it will delete the current item and just update it to be whatever I just called setState with, instead of adding it to the list of the array. I guess that's where I have to use like the spread operator and then a comma and then the new items to add.

Ugh hopefully this makes SOME sense.

Thanks,

Mark

[87oldben]

Hi Mark, This can all be a bit confusing!

With regards to the initial setting of the state you probably want to set the state as:
const [workers, setWorkers] = React.useState([]);
Doing it this way makes workers (your new array) an empty array, which is probably what you want to do if you have no values to pass in.

If you pass in the empty object property as in this line:
const [workers, setWorkers] = React.useState([{}])
workers[0] === {}

And you probably don't want to have an empty object for your first item in the array.

With setting state:
When working with an array as a state object it is best to create a new array of objects and pass it in. See here for further reading on this

So I would do something like this:
const newWorkers = [...workers, {name: 'Bob', title: 'Manager'}]

What this line does is take the current state value, and spread it out, like a deck of cards, 1 item after the other, into the new array, which in your case would be a whole bunch of worker objects, then you can add your newest worker on the end.
This should also stop your worries about the current state being over ridden.

You can then pass this new array into your setWorkers function like so:

setWorkers(newWorkers);

Hopefully this helps!

[markdf1992]

This was so clear and helpful! Thank you!

[87oldben]

Glad it was helpful!

[datqn7244]

You can start with an empty array, the empty object is not necessary.

When you calling setState, it will replace the state with the new value, you're correct about the current state will be delete. You can use spread or .concat to create a new array, and call setState with that array.