Confusion regarding Spread Operator in JS

Question

So basically I have list of objects. I am iterating and have to change one property of the object. I have two scenarios, in one I have to change the property of a particular object.

 setList(list.map((list_item)=>
      list_item.id===id?{...list_item,doubleClick:true}:list_item
    )

And there is another scenario where I have to change the property of every object in the list.

setList(list.map((list_item)=>{...list_item,doubleClick:false}))

The first case is working fine but the second case is throwing error >Parsing error: Unexpected token (34:35)

To me they don't look that different except first one has ternary operator? Is that what's making a difference? How to fix the second case?

Edit: So I think spread operator works with an expression or declaration.

setList(list.map((list_item)=>list_item={...list_item,doubleClick:false}))

This works. Is there any better or correct way to do it?

Answer 1

In your second case, you need to return the new object.

setList(
  list.map((list_item) => {
    return { ...list_item, doubleClick: false };
  })
);

Or a shorter way is to wrap the new object inside ()

setList(list.map((list_item) => ({ ...list_item, doubleClick: false })));

Read more about the syntax here

Edit:

The syntax in the third case is fine but the logic isn't correct. You want to return the new object, not reassign elements in .map()