Scribd
Upload
3 views

productAssignment (1)

The document contains code for a React application that includes components for listing products, managing a shopping cart, and handling checkout. The ProductList component allows users to add or remove items from the cart, while the CartSidebar displays the selected items and total price. The CheckoutButton component triggers a checkout alert with the total price, and the main App component organizes these functionalities.

Uploaded by

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

productAssignment (1)

The document contains code for a React application that includes components for listing products, managing a shopping cart, and handling checkout. The ProductList component allows users to add or remove items from the cart, while the CartSidebar displays the selected items and total price. The CheckoutButton component triggers a checkout alert with the total price, and the main App component organizes these functionalities.

Uploaded by

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

1.

ProductList Component

import React from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { addToCart, removeFromCart } from './store';

function ProductList() {

const dispatch = useDispatch();

const products = useSelector((state) => state.products);

const handleAddToCart = (id) => {

dispatch(addToCart(id));

};

const handleRemoveFromCart = (id) => {

dispatch(removeFromCart(id));

};

return (

<div className="product-list">

<h2>Product Listing</h2>

<div className="products">

{products.map((product) => (

<div key={product.id} className="product">

<h3>{product.name}</h3>

<p>${product.price}</p>

<div className="product-actions">

<button onClick={() => handleAddToCart(product.id)}>Add to Cart</button>


<button onClick={() => handleRemoveFromCart(product.id)}
disabled={product.quantity === 0}>Remove from Cart</button>

<p>Quantity in Cart: {product.quantity}</p>

</div>

</div>

))}

</div>

</div>

);

export default ProductList;

2. CartSidebar Component

import React from 'react';

import { useSelector } from 'react-redux';

function CartSidebar() {

const products = useSelector((state) => state.products);

const totalPrice = products.reduce(

(total, product) => total + product.price * product.quantity,

);

return (

<div className="cart-sidebar">

<h3>Shopping Cart</h3>

<ul>

{products
.filter((product) => product.quantity > 0)

.map((product) => (

<li key={product.id}>

{product.name} - ${product.price} x {product.quantity}

</li>

))}

</ul>

<h4>Total: ${totalPrice}</h4>

</div>

);

export default CartSidebar;

3. CheckoutButton Component

import React from 'react';

import { useSelector } from 'react-redux';

function CheckoutButton() {

const products = useSelector((state) => state.products);

const totalPrice = products.reduce(

(total, product) => total + product.price * product.quantity,

);

const handleCheckout = () => {

alert(`Checkout Successful! Total Price: $${totalPrice}`);

};
return (

<div>

<button onClick={handleCheckout} disabled={totalPrice === 0}>

Checkout

</button>

</div>

);

export default CheckoutButton;

Step 4: Organize the Main Application (App.js)

import React from 'react';

import ProductList from './ProductList';

import CartSidebar from './CartSidebar';

import CheckoutButton from './CheckoutButton';

function App() {

return (

<div className="app">

<div className="main-content">

<ProductList />

<CartSidebar />

</div>

<CheckoutButton />

</div>

);

}
export default App;

You might also like