diff --git a/src/App.js b/src/App.js
index 007aa02..a4b18f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import TodoList from './TodoList.js';
 
 /**
- * Map items from an array to HTML.
+ * App component.
  */
-function App() {
+const App = () => {
   const items = [
     {
       id: 1,
@@ -25,22 +26,7 @@ function App() {
   return (
     <div className="container">
       <div className="row">
-        <div className="todolist">
-          <h1>Todos</h1>
-          <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>
-              )
-            }
-          </ul>
-        </div>
+        <TodoList items={items} />
       </div>
     </div>
   );
diff --git a/src/TodoList.js b/src/TodoList.js
new file mode 100644
index 0000000..b64f450
--- /dev/null
+++ b/src/TodoList.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+/**
+ * Component to show list of todos.
+ *
+ * @param {Object} props
+ */
+const TodoList = (props) => {
+  const {items} = props
+
+  return (
+    <div className="todolist">
+      <h1>Todos</h1>
+      <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>
+          )
+        }
+      </ul>
+    </div>
+  )
+}
+
+export default TodoList;