ItemList.before.jsx

ItemList.before.jsx

function ItemList() {
  const [items, setItems] = React.useState(itemsFromServer);

  const handleChange = React.useCallback(
    function handleChange(id, value) { ... },
    [setItems]
  );

  async function handleSave(id) {
    // set isSaving to true
    await save(items[id]);
    // set isSaving to false
  }

  return (
    <ul>
      {Object.values(items).map(item => (
        <Item
          key={item.id}
          id={item.id}
          value={item.value}
          onChange={handleChange}
          onSave={handleSave}
        />
      ))}
    </ul>
  );
}