diff --git a/src/pages/todo.js b/src/pages/todo.js
index d9f2d2d..2489c68 100644
--- a/src/pages/todo.js
+++ b/src/pages/todo.js
@@ -5,35 +5,46 @@ import Layout from "../components/layout"
 import Image from "../components/image"
 import SEO from "../components/seo"
 
-function createTodo(data) {
-    return fetch('/.netlify/functions/todos-create', {
-        body: JSON.stringify(data),
-        method: 'POST'
-    }).then(response => {
-        return response.json()
-    })
+
+class IndexPage extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            myTodo: {
+                title: 'My todo title',
+                completed: false,
+            }
+
+        }
+    }
+
+
+    createTodo = (data) => {
+        return fetch('/.netlify/functions/todos-create', {
+            body: JSON.stringify(this.state.myTodo),
+            method: 'POST'
+        }).then(response => console.log('here')).then(response => {
+            return response.json()
+        })
+            .catch(console.log('error'))
+            .then(response => console.log(response))
+
+    }
+
+
+    render() {
+        return (
+            <Layout>
+                <SEO title="Home" />
+                <button onClick={this.createTodo} >create</button>
+                <Link to="/page-2/">Go to page 2</Link>
+            </Layout>
+
+        )
+
+    }
+
 }
 
-// Todo data
-const myTodo = {
-    title: 'My todo title',
-    completed: false,
-}
-
-// create it!
-createTodo(myTodo).then((response) => {
-    console.log('API response', response)
-    // set app state
-}).catch((error) => {
-    console.log('API error', error)
-})
-
-const IndexPage = () => (
-    <Layout>
-        <SEO title="Home" />
-        <button onClick={createTodo} >create</button>
-        <Link to="/page-2/">Go to page 2</Link>
-    </Layout>
-)
-
 export default IndexPage