use separate component for reacting to specific observable

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}>
+          <TodoListItem key={index} todo={todo} />
-            <input
-              type="checkbox"
-              checked={todo.done}
-              onChange={() => (todo.done = !todo.done)}
-            />
-            {todo.name}
-          </div>
         ))}
       </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;