CODEWITHSUNDEEP
javascriptreactjsstate
user14093271
user14093271

Reputation:

How to handle a complicated state in react

Background: I am kind of new to react and am learning it, I have made some sites in it but i Highly doubt my way of appraching the problem.

So while handaling a complex state . For example lets say we have a cart which has a product which is a object and then it contains a quantity key now how can we make changes in that quantity, which will be the best way to do it ??

Example

const [cart , setcart] = useState([

{_id: "1",
    name:"product1",
    quantity: 2
},
{_id: "2",
    name:"product2",
    quantity: 1
}
]);

lets say we need to update the quantity count of the product with the id 2 to 5. What we be the best approach, my way of doing it will be.

setcart((items)=>{
const changingItem = items.find((item)=>{return item.id === "2"});
changedItem.quantity = 5;

const newCart = items;
newCart.push(changingItem);

return newCart;
    
})

thank you

Upvotes: 0

Views: 114

Answers (4)

Shubham Takode
Shubham Takode

Reputation: 533

It depends on what type of variable it is. For the example, you mentioned in question if you create a map instead of an array, and put _id as the key that would be the fastest way to manipulate the object.

setcart((items) => { items[2].quantity = 5; return {...items}; })

Upvotes: 0

Milos Pavlovic
Milos Pavlovic

Reputation: 1450

setCart(items => items.map(item => item.id === "2" ? {...item, quantity: 5} : item)}

Upvotes: 1

Maxim Fedarau
Maxim Fedarau

Reputation: 301

setCart((items) => {
const changingItem = items.find((item)=>{return item.id === "2"});
return [...items, {...changingItem, quantity: 5}]
});

Upvotes: 0

Mina
Mina

Reputation: 17564

Just to notify this case of editing an existing product in the list, if you want to add products, you need to check if the item does not exist then push the new product in the array and return a new reference of the array.

const [cart , setcart] = useState([

{_id: "1",
    name:"product1",
    quantity: 2
},
{_id: "2",
    name:"product2",
    quantity: 1
}
]);


setcart((items)=> {
  // first you need to find the index of the target product.
  const itemIndex = items.find((item)=>{return item._id === "2"});
  
  // check if the item exist.
  if (itemIndex !== -1 {
    // Then edit the same object inside the array.
    items[itemIndex].quantity = 5;
  }

  // Create new instance of items array.
  const newCart = [...items];

  return newCart;
    
})

Upvotes: 0

Related Questions