refactored components using react hooks

Author: Koute2

src/App.js

@@ -1,62 +1,51 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import Form from './components/Form';
 import Todo from './components/Todo';
 import './App.css';
 
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      nextId: 1,
-      todos: [],
-    }
-    this.addTodo = this.addTodo.bind(this);
-    this.removeTodo = this.removeTodo.bind(this);
-  }
+const App = () => {
+  const [nextId, setNextId] = useState(1);
+  const [todos, setTodos] = useState([]);
 
-  addTodo(text) {
+  const addTodo = text => {
     const nextTodos = [
-      ...this.state.todos,
+      ...todos,
       {
-        id: this.state.nextId,
+        id: nextId,
         body: text
       },
     ];
 
-    this.setState({
-      nextId: this.state.nextId + 1,
-      todos: nextTodos,
-    });
-  }
+    setTodos(nextTodos);
+    setNextId(nextId + 1)
+  };
 
-  removeTodo(target) {
-    const idx = this.state.todos.findIndex(({ id }) => id === target);
+  const removeTodo = target => {
+    const idx = todos.findIndex(({ id }) => id === target);
     const nextTodos = [
-      ...this.state.todos
+      ...todos
     ];
     nextTodos.splice(idx, 1);
 
-    this.setState({
-      todos: nextTodos,
-    })
+    setTodos(nextTodos);
   }
 
-  render() {
-    return (
-      <div id="app">
-        <Form handleAdd={this.addTodo} />
-        {
-          this.state.todos.map(todo => {
-            return (
-              <Todo
-                key={todo.id}
-                todo={todo}
-                handleRemove={this.removeTodo}
-              />
-            );
-          })
-        }
-      </div>
-    );
-  }
+  return (
+    <div id="app">
+      <Form handleAdd={addTodo} />
+      {
+        todos.map(todo => {
+          return (
+            <Todo
+              key={todo.id}
+              todo={todo}
+              handleRemove={removeTodo}
+            />
+          );
+        })
+      }
+    </div>
+  );
 }
+
+export default App;

src/components/Form.js

@@ -1,41 +1,30 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-export default class Form extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      body: "",
-    };
-    this.handleChnage = this.handleChnage.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
+const Form = ({ handleAdd }) => {
+  const [body, setBody] = useState("");
 
-  handleChnage(e) {
-    this.setState({
-      body: e.target.value,
-    })
+  const handleChnage = e => {
+    setBody(e.target.value);
   }
 
-  handleSubmit(e) {
+  const handleSubmit = e => {
     e.preventDefault();
-    if (this.state.body.length === 0) return;
-    this.props.handleAdd(this.state.body);
-    this.setState({
-      body: "",
-    });
+    if (body.length === 0) return;
+    handleAdd(body);
+    setBody("");
   }
 
-  render() {
-    return (
-      <form action="/" method="post">
-        <input type="text" onChange={this.handleChnage} value={this.state.body} />
-        <button type="submit" onClick={this.handleSubmit}>+</button>
-      </form>
-    );
-  }
+  return (
+    <form action="/" method="post">
+      <input type="text" onChange={handleChnage} value={body} />
+      <button type="submit" onClick={handleSubmit}>+</button>
+    </form>
+  );
 }
 
 Form.propTypes = {
   handleAdd: PropTypes.func,
 }
+
+export default Form;