diff --git a/src/App.js b/src/App.js
index a4b18f1..3c83e64 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import TodoList from './TodoList.js';
+import TodoList from './TodoList';
 
 /**
  * App component.
diff --git a/src/TodoItem.js b/src/TodoItem.js
new file mode 100644
index 0000000..01729ac
--- /dev/null
+++ b/src/TodoItem.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+/**
+ * Each todo item.
+ *
+ * @param {Object} props
+ */
+const TodoItem = (props) => {
+  const { item } = props;
+
+  return (
+    <li key={item.id} className="ui-state-default">
+      <div className="checkbox">
+        <label>
+          <input type="checkbox" checked={item.completed}/>{item.text}
+        </label>
+      </div>
+    </li>
+  )
+}
+
+export default TodoItem;
diff --git a/src/TodoList.js b/src/TodoList.js
index b64f450..2c722cd 100644
--- a/src/TodoList.js
+++ b/src/TodoList.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import TodoItem from './TodoItem';
 
 /**
  * Component to show list of todos.
@@ -14,13 +15,7 @@ const TodoList = (props) => {
       <ul className="list-unstyled">
         {
           items && items.map(item =>
-            <li key={item.id} className="ui-state-default">
-              <div className="checkbox">
-                <label>
-                  <input type="checkbox" checked={item.completed}/>{item.text}
-                </label>
-              </div>
-            </li>
+            <TodoItem key={item.id} item={item} />
           )
         }
       </ul>