// src/App.jsx

const products = [
  { id: 1, name: "Keyboard", price: 49.99 },
  { id: 2, name: "Mouse", price: 19.99 },
  { id: 3, name: "Monitor", price: 199.99 },
];

function ProductList() {
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          {product.name} — ${product.price}
        </div>
      ))}
    </div>
  );
}

function App() {
  return <ProductList />;
}

export default App;

/*
  Notes:
  - product.id is used as the key — a stable, unique identifier that
    won't change even if the products array gets reordered or filtered
    later.
  - Each mapped <div> reads product.name and product.price directly
    off the same object the key was taken from.
*/