cf.completefrontend

Predict the outputMedium

You type a note for Tea and remove Tea. With index keys, what does the list show?

Each Row keeps its own note in state and shows it in brackets after the name. The list uses each item's index as its key.

What does it log, and what does the page show?
import { useState } from "react";
 
function Row({ name, onRemove }) {
  const [note, setNote] = useState("");
  return (
    <li>
      {name}
      {note && <em> ({note})</em>}{" "}
      <input aria-label={"Note for " + name} value={note} onChange={(event) => setNote(event.target.value)} />
      <button onClick={onRemove}>Remove {name}</button>
    </li>
  );
}
 
export default function App() {
  const [items, setItems] = useState(["Tea", "Cake", "Lemonade"]);
  return (
    <ul>
      {items.map((name, index) => (
        <Row key={index} name={name} onRemove={() => setItems(items.filter((item) => item !== name))} />
      ))}
    </ul>
  );
}

It runs in development, rendered as <App />, and then:

  1. You type for Asha in Tea's note box.
  2. You click Remove Tea.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…