From c7d8d258e3382184375cd6b86148313ff4706ad0 Mon Sep 17 00:00:00 2001
From: MATT ANIS <webdev.omis@gmail.com>
Date: Mon, 22 Jun 2026 22:56:15 +0100
Subject: [PATCH] Update part6c.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**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:

```jsx
<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>
```
---
 src/content/6/en/part6c.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/6/en/part6c.md b/src/content/6/en/part6c.md
index 7dbb41ea820..a3198c88852 100644
--- a/src/content/6/en/part6c.md
+++ b/src/content/6/en/part6c.md
@@ -34,9 +34,9 @@ const App = () => {
         <button type="submit">add</button>
       </form>
       {notes.map((note) => (
-        <li key={note.id} onClick={() => toggleImportance(note)}>
+        <li key={note.id} >
           {note.important ? <strong>{note.content}</strong> : note.content}
-          <button onClick={() => toggleImportance(note.id)}>
+          <button onClick={() => toggleImportance(note)}>
             {note.important ? 'make not important' : 'make important'}
           </button>  
         </li>