Components Extracted

view/Components/Statsview/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export default function Index(props: any) {
+    return(
+        <div id="stats">
+            <div id="profile-name">{props.user_data.profile.name}</div>
+            <div id="hp">HP: {props.user_data.stats.hp}</div>
+            <div id="lvl">LVL: {props.user_data.stats.lvl}</div>
+        </div>
+    );
+}

view/Components/Taskview/TodoItem.tsx

@@ -0,0 +1,12 @@
+ import * as React from "react";
+
+function TodoItem(props: any) {
+    return (
+        <div className="todo-item" id={props.id}>
+            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
+            <p>{props.todo_text}</p>
+        </div>
+    )
+}
+
+export default TodoItem

view/Components/Taskview/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import TodoItem from "./TodoItem"
+
+export default function Index(props: any){
+    const listItems = props.todos.map((todo: any) => {
+            return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
+    })
+    return(<ul>{listItems}</ul>);
+}