concat new items to array inside array using spread operator

Question

I am trying to concat new items with existing items to an array that is inside the array. This is how my object look like:

{
   "categories":[
      {
         "category":"cat1",
         "products":[
            {
               "prodname":"product1",
               "quantity":"10"
            },
            {
               "prodname":"product2",
               "quantity":"14"
            }
         ]
      },
      {
         "category":"cat2",
         "products":[
            {
               "prodname":"product3",
               "quantity":"11"
            },
            {
               "prodname":"product4",
               "quantity":"4"
            }
         ]
      }
   ]
}

This is how I update the products array when I get new products in an array for a category.

var indexOfCategory = categoryDataCache.categories.findIndex(c => c.category === "cat1");

    setCategoryDataCache(prevState => ({
      ...prevState,
      categories: [{
          [indexOfCategory]: {
            products: prevState.categories[indexOfCategory].products.concat(newproducts)
          }
        }]
    }))

here are the 2 problems with this code:

it overrides the existing category object as I do not see quantity property after the update
It adds new products as array of products array instead of concatenating the existing products array.

What am I missing here?

Can you console.log(newproducts) and show it? and Also it looks like you create 1 item categories array? — Chayne P. S.
– Chayne P. S., Commented Sep 13, 2020 at 2:44

yonga springfield · Accepted Answer · 2020-09-13 02:48:36Z

to achieve what you are requesting for, following is the code and explantion.

setCategoryDataCache(prevState => ({
  ...prevState,
  categories: prevState.categories.map(cat => {
       if(cat.category === "cat1"){
         return {...cat, products:[...cat.products, ...newProducts]}
       } 
       return cat
}}))

The problems in the code are as follows.

js array.findIndex returns a number index at which predicate matches or -1 otherwise.
When restructuring the prevState and having the categories key immediately below, you are overriding the entire categories attribute value that's why you'll notice my code above, I'm rather using a map and just appended the newProducts(assuming it's an array) directly into the products attribute of the matching category. Otherwise, I simply return the category as is.
If the newProducts object isn't an array, then you should have to spread it ie, remove the ... on ...newProducts.

Chayne P. S. · Accepted Answer · 2020-09-13 02:51:56Z

1

I think it should look like this.

var indexOfCategory = categoryDataCache.categories.findIndex(c => c.category === "cat1");

    setCategoryDataCache(prevState => {
      
      let newCats = categories[indexOfCategory] = {
          products: prevState.categories[indexOfCategory].products.concat(newproducts)
      };

      return {
        ...prevState,
        categories: newCats
      }
    })

answered Sep 13, 2020 at 2:51

Chayne P. S.

1,65814 silver badges17 bronze badges

Comments

parkourkarthik · Accepted Answer · 2020-09-13 03:13:17Z

1

My choice would be to rather clone the prevState and then return the updated object. Like this

var indexOfCategory = categoryDataCache.categories.findIndex(c => c.category === "cat1");

    setCategoryDataCache(prevState => {
      const CDC = {...prevState};
      CDC.categories[indexOfCategory].products = CDC.categories[indexOfCategory].products.concat(newproducts);
      return CDC;
    })

answered Sep 13, 2020 at 3:13

parkourkarthik

8341 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

concat new items to array inside array using spread operator

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related