How to change all array while updating one element in javascript?

Question

I need to have always only one element true in array.

Supposed I have an array

let data = [
  { letter: "a", id: 1, bool: false },
  { letter: "b", id: 2, bool: false },
  { letter: "c", id: 3, bool: false},
  { letter: "d", id: 4, bool: false },
];

every time I click on an element I need to change it to true while all other to false. I have a function

const updatedArray = data.map((item) => {
  if (item.id === id) {
    return {
      ...item,
      bool: true,
    };
  }
  return item;
});

But it works as a toggle for clicked element.

Saeed Shamloo · Accepted Answer · 2022-01-19 09:10:10Z

3

Your problem is here: return item;,you are actually returning the previous value and just updating the bool property of item which has the same id as id variable, but you need to toggle the bool property of all the items, you can acheive your goal like this:

const updatedArray = array.map((item) => ({...item, bool: item.id === id}));

edited Jan 19, 2022 at 9:10

answered Jan 19, 2022 at 9:03

Saeed Shamloo

6,6021 gold badge11 silver badges22 bronze badges

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

Comments

Wais Kamal · Accepted Answer · 2022-01-19 09:02:43Z

0

You need to also set the item's bool to false if it is not the selected item, not just set the selected item's bool to true. This should work:

const id = 3 (clicked item)
const updatedArray = array.map(item => {
  if (item.id === id) {
    return {
      ...item,
      bool: true
    };
  }
  return {
    ...item,
    bool: false
  }
});

answered Jan 19, 2022 at 9:02

Wais Kamal

6,2503 gold badges20 silver badges47 bronze badges

2 Comments

mplungjan Over a year ago

Please be DRY - There is NEVER a reason to use IF to set a bool

Wais Kamal Over a year ago

I just modified the OP's code.

Collectives™ on Stack Overflow

How to change all array while updating one element in javascript?

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related