Choosing the state structure

import { useState } from 'react';

const initialItems = [
  { title: 'pretzels', id: 0 },
  { title: 'crispy seaweed', id: 1 },
  { title: 'granola bar', id: 2 },
];

export default function Menu() {
  const [items, setItems] = useState(initialItems);
  const [selectedItem, setSelectedItem] = useState(items[0]);

  function handleItemChange(id, e) {
    setItems(items.map(item => {
      if (item.id === id) {
        return { ...item, title: e.target.value };
      } else {
        return item;
      }
    }));
  }

  return (
    <>
      <h2>What's your travel snack?</h2>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            <input
              aria-label={'Snack ' + (index + 1)}
              value={item.title}
              onChange={e => handleItemChange(item.id, e)}
            />{' '}
            <button onClick={() => setSelectedItem(item)}>Choose</button>
          </li>
        ))}
      </ul>
      <p>You picked {selectedItem.title}.</p>
    </>
  );
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Menu from './main.jsx';

const picked = () => screen.getByText(/^You picked/).textContent;
const choose = (n) => screen.getAllByRole('button', {name: 'Choose'})[n];
const snack = (n) => screen.getByRole('textbox', {name: 'Snack ' + n});

test('Choose picks an item', async () => {
  const user = userEvent.setup();
  render(<Menu />);
  assert.equal(picked(), 'You picked pretzels.', 'at the start the message reads ' + JSON.stringify(picked()));
  await user.click(choose(1));
  assert.equal(picked(), 'You picked crispy seaweed.', 'after choosing the second snack the message reads ' + JSON.stringify(picked()));
});

test('Editing the chosen item updates the message', async () => {
  const user = userEvent.setup();
  render(<Menu />);
  await user.click(choose(1));
  await user.clear(snack(2));
  await user.type(snack(2), 'nori');
  assert.equal(picked(), 'You picked nori.', 'after editing the chosen snack the message reads ' + JSON.stringify(picked()));
});

test('Editing the first item before choosing updates the message', async () => {
  const user = userEvent.setup();
  render(<Menu />);
  await user.type(snack(1), ' sticks');
  assert.equal(picked(), 'You picked pretzels sticks.', 'after editing the first snack the message reads ' + JSON.stringify(picked()));
});

import { useState } from 'react';

let nextId = 3;
const initialItems = [
  { id: 0, name: 'Bread', price: 3 },
  { id: 1, name: 'Cheese', price: 5 },
  { id: 2, name: 'Apples', price: 4 },
];

export default function ShoppingList() {
  const [items, setItems] = useState(initialItems);
  // TODO: total goes out of sync when an item is removed.
  const [total, setTotal] = useState(12);

  function handleAdd() {
    setItems([...items, { id: nextId++, name: 'Milk', price: 2 }]);
    setTotal(total + 2);
  }

  function handleRemove(id) {
    setItems(items.filter(item => item.id !== id));
  }

  return (
    <>
      <button onClick={handleAdd}>Add milk</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name}: {item.price} €{' '}
            <button aria-label={'Remove ' + item.name} onClick={() => handleRemove(item.id)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
      <p>Total: {total} €</p>
    </>
  );
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ShoppingList from './main.jsx';

const total = () => screen.getByText(/^Total:/).textContent;

test('The total starts at the sum of the prices', () => {
  render(<ShoppingList />);
  assert.equal(total(), 'Total: 12 €', 'at the start the total reads ' + JSON.stringify(total()));
});

test('Removing an item lowers the total', async () => {
  const user = userEvent.setup();
  render(<ShoppingList />);
  await user.click(screen.getByRole('button', {name: 'Remove Cheese'}));
  assert.equal(total(), 'Total: 7 €', 'after removing Cheese the total reads ' + JSON.stringify(total()));
});

test('Adding milk and removing bread keep the total right', async () => {
  const user = userEvent.setup();
  render(<ShoppingList />);
  await user.click(screen.getByRole('button', {name: 'Add milk'}));
  assert.equal(total(), 'Total: 14 €', 'after adding milk the total reads ' + JSON.stringify(total()));
  await user.click(screen.getByRole('button', {name: 'Remove Bread'}));
  assert.equal(total(), 'Total: 11 €', 'after removing Bread the total reads ' + JSON.stringify(total()));
});