diff --git a/src/App2.js b/src/App2.js
new file mode 100644
index 0000000..03b84f5
--- /dev/null
+++ b/src/App2.js
@@ -0,0 +1,71 @@
+import React, { Component } from "react";
+
+import Form from "./Form";
+import "./App.css";
+
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+    [this.getTodos, this.setTodos] = this.useState('todos', []);
+  }
+
+  useState(key, initialValue) {
+    this.state = {
+      ...this.state,
+      [key]: initialValue,
+    };
+
+    return ([
+      // get function
+      () => {
+        // debugger;
+        return this.state[key];
+      },
+
+      // set function
+      (newValue) => {
+        return this.setState({
+          [key]: newValue,
+        });
+      }
+    ]);
+  }
+
+  toggleComplete = (i) => {
+    this.this.setTodos(
+      this.getTodos().map(
+        (todo, k) =>
+          k === i
+            ? {
+              ...todo,
+              complete: !todo.complete
+            }
+            : todo
+      )
+    );
+  }
+
+  render() {
+    return (
+      <div className="App" >
+        <Form
+          onSubmit={text => this.setTodos([{ text, complete: false }, ...this.getTodos()])}
+        />
+        <div>
+          {this.getTodos().map(({ text, complete }, i) => (
+            <div
+              key={text}
+              onClick={() => this.toggleComplete(i)}
+              style={{
+                textDecoration: complete ? "line-through" : ""
+              }}
+            >
+              {text}
+            </div>
+          ))}
+        </div>
+        <button onClick={() => this.setTodos([])}>reset</button>
+      </div>
+    );
+  }
+}
diff --git a/src/index.js b/src/index.js
index 7900787..7e3c4de 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App from "./App2";
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));