diff --git a/src/App.js b/src/App.js
index 838aa71..005acd2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,71 +1,58 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import uuidv4 from 'uuid/v4'
 
 import Todo from './Todo'
 
-class App extends Component {
-  state = {
-    inputValue: '',
-    todos: {}
-  }
+const App = () => {
+  const [inputValue, setInputValue] = useState('')
+  const [todos, setTodos] = useState({})
 
-  addTodo = todo => {
-    this.setState({
-      inputValue: '',
-      todos: {
-        ...this.state.todos,
-        [uuidv4()]: todo
-      }
+  const addTodo = todo => {
+    setInputValue('')
+    setTodos({
+      ...todos,
+      [uuidv4()]: todo
     })
   }
 
-  toggleTodo = id => {
-    this.setState({
-      todos: {
-        ...this.state.todos,
-        [id]: {
-          ...this.state.todos[id],
-          checked: !this.state.todos[id].checked
-        }
+  const toggleTodo = id => {
+    setTodos({
+      ...todos,
+      [id]: {
+        ...todos[id],
+        checked: !todos[id].checked
       }
     })
   }
 
-  onKeyDownHandler = event => {
+  const onKeyDownHandler = event => {
     if (event.keyCode === 13) {
-      this.addTodo({
-        value: this.state.inputValue,
+      addTodo({
+        value: inputValue,
         checked: false
       })
     }
   }
 
-  onChange = event => {
-    this.setState({
-      inputValue: event.target.value
-    })
-  }
-
-  render() {
-    const { inputValue, todos } = this.state
-    return (
-      <main className="app container mx-auto">
-        <h1>To Do</h1>
-        <input
-          value={inputValue}
-          placeholder="Add a task"
-          className="todo-input"
-          onKeyDown={this.onKeyDownHandler}
-          onChange={this.onChange}
-        />
-        <ul className="list-reset mt-4 w-full">
-          {Object.keys(todos).map(id => (
-            <Todo id={id} todo={todos[id]} toggleTodo={this.toggleTodo} />
-          ))}
-        </ul>
-      </main>
-    )
-  }
+  const onChange = event => setInputValue(event.target.value)
+
+  return (
+    <main className="app container mx-auto">
+      <h1>To Do</h1>
+      <input
+        value={inputValue}
+        placeholder="Add a task"
+        className="todo-input"
+        onKeyDown={onKeyDownHandler}
+        onChange={onChange}
+      />
+      <ul className="list-reset mt-4 w-full">
+        {Object.keys(todos).map(id => (
+          <Todo id={id} todo={todos[id]} toggleTodo={toggleTodo} />
+        ))}
+      </ul>
+    </main>
+  )
 }
 
 export default App
diff --git a/src/Todo.js b/src/Todo.js
index 8a7ae73..f964fa7 100644
--- a/src/Todo.js
+++ b/src/Todo.js
@@ -1,23 +1,17 @@
-import React, { Component } from 'react'
+import React from 'react'
 import classNames from 'classnames'
 
-class Todo extends Component {
-  onClick = () => this.props.toggleTodo(this.props.id)
-  render() {
-    const { id, todo } = this.props
-    return (
-      <li
-        key={id}
-        onClick={this.onClick}
-        className={classNames('todo', {
-          'opacity-25': todo.checked
-        })}
-      >
-        <span className="todo-bullet" />
-        {todo.value}
-      </li>
-    )
-  }
-}
+const Todo = ({ id, todo: { value, checked }, toggleTodo }) => (
+  <li
+    key={id}
+    onClick={() => toggleTodo(id)}
+    className={classNames('todo', {
+      'opacity-25': checked
+    })}
+  >
+    <span className="todo-bullet" />
+    {value}
+  </li>
+)
 
 export default Todo