Scribd
Upload
13 views

Amazonclone

The document provides instructions to modify code to allow removing a specific item from the shopping basket by index. It involves: 1) Adding the basket index to the map in checkout.js, 2) Passing the basket index to the remove function in ProductCheckout.js, 3) Using the basket index to splice the item from state in the reducer when 'REMOVE_FROM_BASKET' is dispatched.

Uploaded by

Sahil Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views

Amazonclone

The document provides instructions to modify code to allow removing a specific item from the shopping basket by index. It involves: 1) Adding the basket index to the map in checkout.js, 2) Passing the basket index to the remove function in ProductCheckout.js, 3) Using the basket index to splice the item from state in the reducer when 'REMOVE_FROM_BASKET' is dispatched.

Uploaded by

Sahil Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

You need to do a bit of a different approach which is kind of simpler imo.

You need to modify this line in checkout.js to include the index value and key
value. (if you do not include the key value you'll just get an error)
checkout.js ////
{basket.map((item, index) => (
<CheckoutProduct
key={index}
basketIndex={index}
id={item.id}
title={item.title}
price={item.price}
image={item.image}
/>
))}

Then in ProductCheckout.js add the basketIndex value and use it in the dispatch
function
ProductCheckout.js ////
function CheckoutProduct({ basketIndex, id, title, price, image }) {
const [, dispatch] = useStateValue();

const removeFromBasket = () => {


dispatch({
type: 'REMOVE_FROM_BASKET',
basketIndex: basketIndex,
})
}

Finally in the reducer.js file add the 'REMOVE_FROM_BASKET' event which should look
like this
reducer.js ////
case 'REMOVE_FROM_BASKET':
let newBasket = [...state.basket];

newBasket.splice(action.basketIndex, 1);

return {
...state,
basket: newBasket
};

Hope this helps :)

You might also like