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 (
{contacts.map((contact) => (
-
@@ -1207,27 +1210,29 @@ export default function ContactList({contacts, selectedId, dispatch}) {
);
}
+
```
```js src/Chat.js
-import { useState } from 'react';
-export default function Chat({contact, message, dispatch}) {
+export default function Chat({ contact, message, dispatch }) {
return (
+ Chat with {contact.name}
);
}
+
```
```css