Update object across array of objects using setState

Question

My question relates to this one but the issue here that I must relay on object properties and I want to update just ONE object. If I am using map it updates all objects in my array of objects. Its structure is:

[
    {
      id: 1,
      itemNames: ['aaa','xxx'],
      removed: [],
      ...
    },
    {
      id: 1,
      itemNames: ['yyy', 'xxx'],
      removed: [],
      ...
    },
    ...
]

My logic is: I look for item name across itemNames, if it exists in state - remove it from first object occurance and add it to removed property of this object. I managed to do it with map, but then it does it for every object that has given item name.

function filterByItemName(itemName) {
  this.setState(prevState => ({
    ...prevState,
    arr: prevState.arr.map(item) => {
      if (item.itemNames.includes(itemName)) {
        return {
          ...item,
          removed: [...item.removed, itemName],
          itemNames: removeFirstFoundElement(item.itemNames, itemName),
        };
      }
      return item;
    }),
  }));
}

The following code works in a way that it finds ALL objects with given itemName - but I would like to change just first case... After calling filterByItemName('xxx') I want it to be:

[
    {
      id: 1,
      itemNames: ['aaa'],
      removed: ['xxx],
      ...
    },
    {
      id: 1,
      itemNames: ['yyy', 'xxx'],
      removed: [],
      ...
    },
    ...
]

While now it is as follows:

[
    {
      id: 1,
      itemNames: ['aaa'],
      removed: ['xxx],
      ...
    },
    {
      id: 1,
      itemNames: ['yyy'],
      removed: ['xxx'],
      ...
    },
    ...
]

Please create a small demo for this using codesandbox.io to show the issue happening. — palaѕн
– palaѕн, Commented May 5, 2020 at 8:57
Everything is there - how it works now and how it should as well... — heisenberg7584
– heisenberg7584, Commented May 5, 2020 at 9:03
Trying to understand what you're trying to do - you want to remove the first found element and update all the other matching ones? — nanobar
– nanobar, Commented May 5, 2020 at 9:13

Sifat Haque · Accepted Answer · 2020-05-05 09:09:26Z

0

I think you can set a shouldInsert flag to check if you've already inserted once or not. Here is my approach. It would be easier if you could share some codesandbox link here.

function filterByItemName(itemName) {
  let shouldInsert = true;
  this.setState(prevState => ({
    ...prevState,
    arr: prevState.arr.map(item) => {
      const found = item.itemNames.includes(itemName);
      if (found && shouldInsert) {
        shouldInsert = false;
        return {
          ...item,
          removed: [...item.removed, itemName],
          itemNames: removeFirstFoundElement(item.itemNames, itemName),
        };
      }
      return item;
    }),
  }));
}

answered May 5, 2020 at 9:09

Sifat Haque

6,1272 gold badges18 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Update object across array of objects using setState

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related