Simple Shopping Cart

This example demonstrates how to build a basic shopping cart with the ability to add and remove items.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

const items = [
  { id: 1, name: 'Apple', price: 1 },
  { id: 2, name: 'Banana', price: 0.5 },
  { id: 3, name: 'Orange', price: 0.8 },
];

function ShoppingCart() {
  const [cart, setCart] = useState([]);

  const addItem = (item) => {
    setCart([...cart, item]);
  };

  const removeItem = (id) => {
    setCart(cart.filter(item => item.id !== id));
  };

  const total = cart.reduce((acc, item) => acc + item.price, 0);

  return (
    <div>
      <h1>Shopping Cart</h1>
      <h2>Items:</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price}
            <button onClick={() => addItem(item)}>Add to Cart</button>
          </li>
        ))}
      </ul>
      <h2>Cart:</h2>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price}
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <h3>Total: ${total.toFixed(2)}</h3>
    </div>
  );
}

ReactDOM.render(<ShoppingCart />, document.getElementById('root'));