I'm encountering this weird error that I still can't understand what's exactly is happening.
I'm updating a state array and want to parse new objects to that array with keeping the old ones.
The known method for me with ES6 was to use the spread operator as:
const [stories, setStories] = useState([]);
...
setStories(stories => [...stories, newStories]);
where newStories is also an array of objects.
But here I get the following output:
while when I do the same with concat as:
setStories(stories => stories.concat(newStories));
It returns as expected:
So far, I thought that these 2 methods would perform the same.
Also I found this article and that confirms my knowledge too, and contradicts with the above output that I'm getting.See: Best solution: Spread operator … & a wrapper
Take for instance this code from the docs:
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
As you can see by spreading the parts array into the lyrics array it pulls the data from the array. If you were to instead write:
let parts = ['shoulders', 'knees'];
let lyrics = ['head', parts, 'and', 'toes'];
// ["head", ["shoulders", "knees"], "and", "toes"]
You would get the array instead.
If you take an array
[{name: 'story1'}, {name: 'story2'}]
and place it in your other array, you get:
setStories((stories) => [...stories, newStories]);
[[{name: 'story1'}, {name: 'story2'}]]
if you do it again, you get:
setStories((stories) => [...stories, newStories]);
[[{name: 'story1'}, {name: 'story2'}],[{name: 'story1'}, {name: 'story2'}]]
Because you are just placing the array into your other array.
If you want to remove the objects from your array, you must spread the object into your state.
setStories((prevstate) => [...prevstate, ...newStories]);
then you get:
[{},{},{},{}]
because by spreading you are taking the objects out of the array they are currently in.
As a side note I wouldn't recommend naming the parameter of your callback function the same name as your state, it becomes confusing as to what you are actually referencing. I've seen prevstate or in your case some would write prevStories etc. Just a recommendation.
You need to spread both the arrays to make a new array
const story1 = [{a: 1}, {b: 2}]
const story2 = [{c: 3}, {d: 4}]
const newStories = [...story1, ...story2];
console.log(newStories);Instead if you use it only for one array, it would create a sub array inside the newArray
const story1 = [{a: 1}, {b: 2}]
const story2 = [{c: 3}, {d: 4}]
const newStories = [story1, ...story2];
console.log(newStories);const a = [{a: 1}, {b: 2}]
const b = [{c: 3}, {d: 4}]
const c = [ ...a, ...b ]
const d = [ a, b ]
const e = [ ...a, b ]
const f = [ a, ...b ]
console.log(c)
console.log(d)
console.log(e)
console.log(f)