Makes sense that a single npc is a component by itself.

js-src/components/talk-npc.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+import type { TalkNPC } from '@lastres/talk-npc'
+
+import OutputPacketTalk from '@lastres/output-packet/talk'
+
+export interface TalkNPCComponentData {
+    npc: TalkNPC
+    websocket: WebSocket | null
+    key: string
+}
+
+export default function TalkNPCComponent (props: TalkNPCComponentData): JSX.Element {
+    const npc = props.npc
+    function onWordlesslyTalk (npc: TalkNPC): void {
+        if (props.websocket === null) {
+            return
+        }
+        new OutputPacketTalk(npc.identifier).send(props.websocket)
+    }
+
+    function printAvatar (npc: TalkNPC): JSX.Element {
+        if (npc.icon === undefined) {
+            return <></>
+        }
+        return <div className="avatar">
+            <img src={npc.icon}/><div className="shadow"/>
+        </div>
+    }
+
+    return <div key={npc.identifier} className="talk-npc">
+        <div className="detail">
+            <div className="name-container">
+                {
+                    printAvatar(npc)
+                }
+                <div className="name">
+                    <p>{npc.name}</p>
+                </div>
+            </div>
+            <div className="buttons">
+                <button onClick={() => {
+                    onWordlesslyTalk(npc)
+                }}>Hablar</button>
+                <button>Decir palabra</button>
+            </div>
+        </div>
+    </div>
+}

js-src/components/talk-npcs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-import type { TalkNPCs, TalkNPC } from '@lastres/talk-npc'
+import type { TalkNPCs } from '@lastres/talk-npc'
-import OutputPacketTalk from '@lastres/output-packet/talk'
+import TalkNPCComponent from '@lastres/components/talk-npc'
 
 export interface TalkNPCsComponentProps {
     talkNPCs: TalkNPCs | null
@@ -9,20 +9,6 @@ export interface TalkNPCsComponentProps {
 }
 export default function TalkNPCsComponent (props: TalkNPCsComponentProps): JSX.Element {
     const npcs = props.talkNPCs
-    function onWordlesslyTalk (npc: TalkNPC): void {
-        if (props.websocket === null) {
-            return
-        }
-        new OutputPacketTalk(npc.identifier).send(props.websocket)
-    }
-    function printAvatar (npc: TalkNPC): JSX.Element {
-        if (npc.icon === undefined) {
-            return <></>
-        }
-        return <div className="avatar">
-            <img src={npc.icon}/><div className="shadow"/>
-        </div>
-    }
     if (npcs === null) {
         return <></>
     }
@@ -37,24 +23,11 @@ export default function TalkNPCsComponent (props: TalkNPCsComponentProps): JSX.E
             {
                 Object.keys(npcs).map((identifier) => {
                     const npc = npcs[identifier]
-                    return <div key={npc.identifier} className="talk-npc">
+                    return (
-                        <div className="detail">
+                        <TalkNPCComponent key={identifier}
-                            <div className="name-container">
+                            npc={npc}
-                                {
+                            websocket={props.websocket}/>
-                                    printAvatar(npc)
+                    )
-                                }
-                                <div className="name">
-                                    <p>{npc.name}</p>
-                                </div>
-                            </div>
-                            <div className="buttons">
-                                <button onClick={() => {
-                                    onWordlesslyTalk(npc)
-                                }}>Hablar</button>
-                                <button>Decir palabra</button>
-                            </div>
-                        </div>
-                    </div>
                 })
             }
         </>