How do you handle events in React?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default function Toolbar({ onSave, items }) {
  function handleDelete(id, event) {
    event.stopPropagation();          // do not bubble to the row
    console.log('delete', id);
  }

  return (
    <div onClick={() => console.log('row clicked')}>
      <button onClick={onSave}>Save</button>
      <button onClick={e => handleDelete('all', e)}>Delete all</button>
      {items.map(i => (
        <button key={i.id} onClick={e => handleDelete(i.id, e)}>{i.name}</button>
      ))}
    </div>
  );
}