Update value in nested object using React Hooks

Question

My desire is to update the products inside the shoppingCart[0]
The state: const [authenticatedUser, setAuthenticatedUser] = useContext<any>(UserContext)

console.log(authenticatedUser) displays the following:

I've tried updating the value of the products array with the following code:
setAuthenticatedUser({ ...authenticatedUser, products: ['new item'] }) But it creates a new product array inside the authenticatedUser.

How can I update the products array inside authenticatedUser.shoppingCart[0].products ?

Data:

const [authenticatedUser, setAuthenticatedUser] = useState(
   {
    authenticated: true,
    id: "3i4jijrifjifrjifr",
    shoppingCart: [{
        createdAt: "2021-01-29T10:14:21.253Z",
        products: ['this is the array i want to update', '2', '3']
    }]
   }
)

you need to use useState, not useContext

Kanan Farzali
– Kanan Farzali

2021-01-29 13:49:29 +00:00
Commented Jan 29, 2021 at 13:49 — Kanan Farzali
– Kanan Farzali, Commented Jan 29, 2021 at 13:49

Sakshi · Accepted Answer · 2021-01-29 13:52:13Z

1

try this:

setAuthenticatedUser({ ...authenticatedUser, shoppingCart:[{...authenticatedUser.shoppingCart[0],products:['newItem']}] })

answered Jan 29, 2021 at 13:52

Sakshi

1,5563 gold badges11 silver badges17 bronze badges

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

Comments

David Fernández Ortiz · Accepted Answer · 2021-01-29 13:58:56Z

0

const authenticatedUserCopy = { ...authenticatedUser }
authenticatedUserCopy.shoppingCart[0].products = ['new product']
setAuthenticatedUser(authenticatedUserCopy)

answered Jan 29, 2021 at 13:58

David Fernández Ortiz

7334 silver badges7 bronze badges

Comments

Yaroslav Bigus · Accepted Answer · 2021-01-29 13:59:46Z

0

{ 
    ...authenticatedUser,
    shoppingCart: authenticatedUser.shoppingCart.map(s => { //map all items
        return {
            ...s,
            products: [...s.products, 'new item'] //add item
        }
    })
}

answered Jan 29, 2021 at 13:59

Yaroslav Bigus

6787 silver badges24 bronze badges

Collectives™ on Stack Overflow

Update value in nested object using React Hooks

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