diff --git a/src/components/App.js b/src/components/App.js
index ab10f31..26a941c 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -26,11 +26,28 @@ class App extends Component {
     ]
   };
 
+  /**
+   * Add a new todo to state items.
+   *
+   * @param {String} text
+   */
+  addNewTodo = (text) => {
+    this.setState(state => {
+      const todo = {
+        text,
+        completed: false,
+        id: state.length + 1
+      };
+
+      return {items: [...state.items, todo]};
+    })
+  }
+
   render() {
     return (
       <div className="container">
         <div className="row">
-          <TodoList items={this.state.items} />
+          <TodoList items={this.state.items} addNewTodo={this.addNewTodo} />
         </div>
       </div>
     );
diff --git a/src/components/InputBox.js b/src/components/InputBox.js
index be378fe..9189943 100644
--- a/src/components/InputBox.js
+++ b/src/components/InputBox.js
@@ -1,12 +1,50 @@
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 /**
  * Input component to add a new todo.
  */
-const InputBox = () => {
-  return (
-    <input type="text" className="form-control add-todo" placeholder="Add new todo" />
-  )
+class InputBox extends Component {
+  propTypes = {
+    items: PropTypes.array,
+    addNewTodo: PropTypes.func.isRequired
+  }
+
+  state = {
+    value: ''
+  }
+
+  /**
+   * Set input text value on change event.
+   */
+  handleChange = (event) => {
+    this.setState({value: event.target.value})
+  }
+
+  /**
+   * Add a note when 'Enter' key is pressed.
+   */
+  handleKeyUp = (event) => {
+    const value = event.target.value;
+
+    if (event.keyCode === 13 && value) {
+      this.props.addNewTodo(value);
+
+      this.setState({value: ''});
+    }
+  }
+
+  render() {
+    return (
+      <input type="text"
+        value={this.state.value}
+        className="form-control add-todo"
+        placeholder="Add new todo"
+        onKeyUp={this.handleKeyUp}
+        onChange={this.handleChange}
+      />
+    )
+  }
 }
 
 export default InputBox;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 71bbc86..39cd56c 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -17,7 +17,7 @@ const TodoList = (props) => {
   return (
     <div className="todolist">
       <h1>Todos</h1>
-      <InputBox />
+      <InputBox {...props} />
       <ul className="list-unstyled">
         {
           items && items.map(item =>