Bug: duplicate onClick handlers cause 404 on toggleImportance in Part 6 TanStack Query example

[Matt-Anis]

Part: 6 — TanStack Query

Description:
In the TanStack Query example, the toggleImportance function is triggered twice when clicking the button, due to both the <li> and the nested <button> having onClick handlers. Because of event bubbling, clicking the button fires both handlers.

The two handlers also pass different arguments:

• <li onClick={() => toggleImportance(note)}> — passes the full note object ✓
• <button onClick={() => toggleImportance(note.id)}> — passes only the id string ✗

Since toggleImportance expects a full note object and spreads it ({ ...note, important: !note.important }), passing just the id string results in PUT /notes/undefined (404) from the button handler, followed by a correct PUT /notes/:id (200) from the li handler.

Reproduction:
Open the browser Network tab and click any "make important" button — two PUT requests fire, the first returning 404 and the second 200.

Suggested fix:
Remove the onClick from the <li> and fix the <button> to pass the full note object:

<li key={note.id}>
  {note.important ? <strong>{note.content}</strong> : note.content}
  <button onClick={() => toggleImportance(note)}>
    {note.important ? 'make not important' : 'make important'}
  </button>
</li>