Remove one element at index from the list inside an array of objects

Question

I would like to remove one element at index from the list items inside an array of objects using react.

For now, I do not know which method to use.

const [users, setUsers] = useState([
  {
    username: "Peter",
    items: [
      { name: "Bananas 🍌", quantity: 10 },
      { name: "Strawberry 🍓", quantity: 20 },
      { name: "Milk 🥛", quantity: 6 },
    ],
  },
  {
    username: "William",
    items: [
      { name: "Brocolis 🥦", quantity: 3 },
      { name: "Carottes 🥕", quantity: 10 },
      { name: "Honey 🍯", quantity: 2 },
    ],
  },
]);

// Remove element from list item (Pseudo Code)
function removeItem(index: number) {
  const initialState = [...users]
  initialState[userIndex].items.splice(itemIndex, 1)
  setUsers(initialState)
}

Thank you for your help.

I don't understand, which element do you want to remove exactly ? — VersifiXion
– VersifiXion, Commented Nov 25, 2020 at 11:31
I want to remove any item in a user's items list by specifying its index. — Olivier.C
– Olivier.C, Commented Nov 25, 2020 at 11:38
Let's say I want to delete an item from any user's list : items — Olivier.C
– Olivier.C, Commented Nov 25, 2020 at 11:52
@Olivier.C you should check my answer I think it covers your use case. — gmoniava
– gmoniava, Commented Nov 25, 2020 at 12:49

gmoniava · Accepted Answer · 2020-11-25 11:37:43Z

1

Assuming you want to remove item with index: itemIndex from user with index userIndex user.

function removeItem(userIndex, itemIndex) {
    return users.map((x, i) => {
        if (i === userIndex) return {
            ...x,
            items: x.items.filter((y, j) => j !== itemIndex)
        }
        return x;
    })
}

You have to do it in immutable way since it comes from state.

answered Nov 25, 2020 at 11:37

gmoniava

28.9k9 gold badges61 silver badges101 bronze badges

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

Comments

Erick Christian · Accepted Answer · 2020-11-25 11:32:51Z

0

You can use Array.prototype.filter for that

function removeItem(index: number) {
  setUsers(users.filter((user, userIndex) => userIndex !== index))
}

You can read more about Array.prototype.filter here

answered Nov 25, 2020 at 11:32

Erick Christian

1082 silver badges11 bronze badges

Collectives™ on Stack Overflow

Remove one element at index from the list inside an array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related