From a467b67b28b371477d7eee8b23e013b9233a2250 Mon Sep 17 00:00:00 2001
From: vaibhavii09 <vaibhavibaware09@gmail.com>
Date: Sat, 2 Aug 2025 19:41:32 +0530
Subject: [PATCH] Fix: Add missing Chat.js and complete ContactList.js dispatch
 logic in useReducer Messenger example

---
 .../extracting-state-logic-into-a-reducer.md  | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 5c08c012390..cba0f46c843 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -1189,16 +1189,19 @@ export function messengerReducer(state, action) {
 ```
 
 ```js src/ContactList.js
-export default function ContactList({contacts, selectedId, dispatch}) {
+export default function ContactList({ contacts, selectedId, dispatch }) {
   return (
     <section className="contact-list">
       <ul>
         {contacts.map((contact) => (
           <li key={contact.id}>
             <button
-              onClick={() => {
-                // TODO: dispatch changed_selection
-              }}>
+              onClick={() =>
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id
+                })
+              }>
               {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
             </button>
           </li>
@@ -1207,27 +1210,29 @@ export default function ContactList({contacts, selectedId, dispatch}) {
     </section>
   );
 }
+
 ```
 
 ```js src/Chat.js
-import { useState } from 'react';
 
-export default function Chat({contact, message, dispatch}) {
+export default function Chat({ contact, message, dispatch }) {
   return (
     <section className="chat">
+      <h2>Chat with {contact.name}</h2>
       <textarea
         value={message}
-        placeholder={'Chat to ' + contact.name}
-        onChange={(e) => {
-          // TODO: dispatch edited_message
-          // (Read the input value from e.target.value)
-        }}
+        placeholder={`Message to ${contact.name}`}
+        onChange={(e) =>
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value
+          })
+        }
       />
-      <br />
-      <button>Send to {contact.email}</button>
     </section>
   );
 }
+
 ```
 
 ```css