Project 29: E-commerce Cart

React Engineer

Builds on these lessons

Ai Generating With Claude Ai Generating With Chatgpt Ai Refactoring Ai Custom Hooks Ai Figma To React

Step 1 of 3

Project

Generating a Component with AI

Add a CartItem component with a comment noting it started as an AI-generated first draft from a prompt describing the props needed (name, price, quantity) — then review it like any other code: check prop names match your data, check accessibility, check it fits your existing patterns before keeping it.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

// Generated from a prompt describing the needed props (name, price, quantity),
// then reviewed: checked prop names match the real cart data shape, checked
// accessibility, checked it fits this project's existing component patterns.
function CartItem({ name, price, quantity }) {
  return (
    <div className="cart-item">
      <span>{name}</span>
      <span>Qty: {quantity}</span>
      <span>${price * quantity}</span>
    </div>
  );
}

export default function Cart() {
  return <CartItem name="Canvas Tote Bag" price={28} quantity={1} />;
}

← Previous Next →