Update nested Array Object Array in React State

Question

I'm trying to update qty of product onClick event using useState in react, the data that I am updating is nested array-object-array

Below is the example of nested data I want to update the qty from it

let categoriesInfo = [
        {
            catid: 'category-1',
            catName: 'Fun Stuff',
            product: [
                {
                    id : 1,
                    name: 'candy',
                    qty: 0,
                },
                {
                    id : 2,
                    name: 'cookie',
                    qty: 0,
                }
            ]
         },
         {
            catid: 'category-2',
            catName: 'Fun Stuff2',
            product: [
                {
                    id : 1,
                    name: 'candy2',
                    qty: 0,
                },
                {
                    id : 2,
                    name: 'cookie2',
                    qty: 0,
                }
            ]
        }
    ]

I am using useState

const [productData, setProductData] = useState(categoriesInfo);

I am fetching the id and catid on click button from other component in the function x

const x = (data) =>{

        console.log(productData)
        const y = productData.map(obj => {
            if (obj.catid == data.catid && obj.product[1-data.prodid].id == data.prodid) {
                console.log(obj.product[1-data.prodid].name)
                return {...obj.product[1-data.prodid], qty : 2}; //something like this 
            }
            return obj;
        });
        setProductData(y);
    }

This question was already answered here : https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react/43041334#43041334 — ETNs, Sep 12 '22 at 14:08

score 2 · Answer 1 · answered Sep 12 '22 at 13:55

Code looks really close, what about this?

        const y = productData.map(obj => {
            // you're not interested, just return obj
            if (obj.catid !== data.catid) return obj;

            // you are interested, return a new object
            return {
               ...obj,
               // iterate over it's products and update the one you want
               product: obj.product.map(product => {
                  if(product.id !== data.prodid) return product
                  return { ...product, qty: 2}
               })
            }
        });

thank you this work had to change some code but worked in the end — Krish Varma, Sep 13 '22 at 06:40

score 0 · Answer 2 · answered Sep 12 '22 at 14:01

Try like below:

let categoriesInfo = [ { catid: "category-1", catName: "Fun Stuff", product: [ { id: 1, name: "candy", qty: 0 }, { id: 2, name: "cookie", qty: 0 } ] }, { catid: "category-2", catName: "Fun Stuff2", product: [ { id: 1, name: "candy2", qty: 0 }, { id: 2, name: "cookie2", qty: 0 } ] } ];

function App() {
  const [productData, setProductData] = React.useState(categoriesInfo);

  const x = (data) => {
    setProductData((prevProductData) =>
      prevProductData.map((item) =>
        item.catid === data.catid
          ? {
              ...item,
              product: item.product.map((product) =>
                product.id === data.prodid
                  ? { ...product, qty: data.qty }
                  : product
              )
            }
          : item
      )
    );
  };

  return (
    <div>
      <button onClick={() => x({ catid: "category-2", prodid: 2, qty: 4 })}>
        Update value
      </button>
      <div>{JSON.stringify(productData, null, 4)}</div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Update nested Array Object Array in React State

2 Answers2