$0.30000000000000004 in JavaScript

An AI assistant wrote the shop's Extras box: a paper bag, a sticker and gift wrap that a visitor can add to an order. It stored the prices as dollars with decimals and added them up:

const EXTRAS = [
  { id: 1, name: "Paper bag", price: 0.1 },
  { id: 2, name: "Sticker", price: 0.2 },
  { id: 3, name: "Gift wrap", price: 1.5 },
];
…
const total = picked.reduce((sum, extra) => sum + extra.price, 0);
…
<p>Extras total: ${total}</p>

It looks fine until a visitor adds the paper bag and then the sticker: the page says Extras total: $0.30000000000000004. JavaScript keeps numbers in binary, where 0.1 and 0.2 can't be stored exactly, so 0.1 + 0.2 comes out a hair more than 0.3.

The fix is to count money in cents, as whole numbers. Whole numbers always add exactly: 10 + 20 is 30. Turn cents into dollar text only when you show a price, with two decimals: (250 / 100).toFixed(2) is the text "2.50".

The check opens the page and adds all three extras. Your page must show:

item: Paper bag $0.10
item: Sticker $0.20
item: Gift wrap $1.50
text: Extras total: $0.00
> click "Add" in "Paper bag"  →  text: Extras total: $0.10
> click "Add" in "Sticker"    →  text: Extras total: $0.30
> click "Add" in "Gift wrap"  →  text: Extras total: $1.80

Your task: in src/Extras.jsx, write the three extras with their prices in cents, a formatCents function that turns cents into text like $0.10, each extra's price, and the total, added up in cents and formatted only when it is shown.

Assignment
Follow the Coding Tutorial to rewrite the AI's Extras box so it keeps prices in whole cents and formats them only when it shows them.

Hint
$0.10 is 10 cents and $1.50 is 150 cents. toFixed(2) gives text with exactly two decimals.