Die Struktur des State wählen

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 wählt einen Eintrag', async () => {
  const user = userEvent.setup();
  render(<Menu />);
  assert.equal(picked(), 'You picked pretzels.', 'zu Beginn lautet die Meldung ' + JSON.stringify(picked()));
  await user.click(choose(1));
  assert.equal(picked(), 'You picked crispy seaweed.', 'nach der Wahl des zweiten Snacks lautet die Meldung ' + JSON.stringify(picked()));
});

test('Das Bearbeiten des gewählten Eintrags aktualisiert die Meldung', 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.', 'nach dem Bearbeiten des gewählten Snacks lautet die Meldung ' + JSON.stringify(picked()));
});

test('Das Bearbeiten des ersten Eintrags vor einer Wahl aktualisiert die Meldung', async () => {
  const user = userEvent.setup();
  render(<Menu />);
  await user.type(snack(1), ' sticks');
  assert.equal(picked(), 'You picked pretzels sticks.', 'nach dem Bearbeiten des ersten Snacks lautet die Meldung ' + 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('Die Summe beginnt bei der Summe der Preise', () => {
  render(<ShoppingList />);
  assert.equal(total(), 'Total: 12 €', 'zu Beginn lautet die Summe ' + JSON.stringify(total()));
});

test('Das Entfernen eines Eintrags senkt die Summe', async () => {
  const user = userEvent.setup();
  render(<ShoppingList />);
  await user.click(screen.getByRole('button', {name: 'Remove Cheese'}));
  assert.equal(total(), 'Total: 7 €', 'nach dem Entfernen von Cheese lautet die Summe ' + JSON.stringify(total()));
});

test('Milch hinzufügen und Brot entfernen lassen die Summe stimmen', async () => {
  const user = userEvent.setup();
  render(<ShoppingList />);
  await user.click(screen.getByRole('button', {name: 'Add milk'}));
  assert.equal(total(), 'Total: 14 €', 'nach dem Hinzufügen von Milch lautet die Summe ' + JSON.stringify(total()));
  await user.click(screen.getByRole('button', {name: 'Remove Bread'}));
  assert.equal(total(), 'Total: 11 €', 'nach dem Entfernen von Bread lautet die Summe ' + JSON.stringify(total()));
});