From fa84b633f4cd84d19559566a92add0358ddd43eb Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 11 Mar 2026 15:22:12 -0700
Subject: [PATCH] use separate component for reacting to specific observable

---
 src/App.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e203507..d178d8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { observer } from 'mobx-react-lite';
-import { TodoList } from './state';
+import { TodoList, Todo } from './state';
 
 const App = observer(({ todos }: { todos: TodoList }) => {
   return (
@@ -21,18 +21,24 @@ const App = observer(({ todos }: { todos: TodoList }) => {
           Learn React
         </a>
         {todos.todos.map((todo, index) => (
-          <div key={index}>
-            <input
-              type="checkbox"
-              checked={todo.done}
-              onChange={() => (todo.done = !todo.done)}
-            />
-            {todo.name}
-          </div>
+          <TodoListItem key={index} todo={todo} />
         ))}
       </header>
     </div>
   );
 });
 
+const TodoListItem = observer(({ todo }: { todo: Todo }) => {
+  return (
+    <div>
+      <input
+        type="checkbox"
+        checked={todo.done}
+        onChange={() => (todo.done = !todo.done)}
+      />
+      {todo.name}
+    </div>
+  );
+});
+
 export default App;