tutorial

Author: BraidenCutforth

src/App.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 
 import TodoList from './components/TodoList'
+// import { Profile } from './components/Profile'
 
 export const App: React.FC = () => {
     return (
         <div>
             <TodoList />
+            {/* <Profile userId={'Hello!'}></Profile> */}
         </div>
     )
 }

src/components/Profile.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+
+interface Props {
+    userId: string
+    altText?: string
+}
+
+interface State {
+    username: string
+    age: number
+}
+
+async function getData() {
+    return Promise.resolve({
+        username: 'bob',
+        age: 28,
+    })
+}
+
+export class Profile extends Component<Props, State> {
+    state = {
+        username: '',
+        age: 0,
+    }
+
+    async componentDidMount() {
+        const userData = await getData()
+        this.setState(userData)
+    }
+
+    render() {
+        return (
+            <div>
+                <h1>{this.props.userId}</h1>
+                <p>{this.state.username}</p>
+                <p>{this.state.age}</p>
+            </div>
+        )
+    }
+}

src/components/TodoItem.tsx

@@ -3,6 +3,7 @@ import { Todo } from '../services/todos'
 
 interface Props extends React.PropsWithChildren<{}> {
     todo: Todo
+    onComplete: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 const style: React.CSSProperties = {
@@ -12,10 +13,15 @@ const style: React.CSSProperties = {
 
 export const TodoItem: React.FC<Props> = ({
     todo,
+    onComplete,
 }: Props): React.ReactElement => {
     return (
         <div style={style}>
-            <input type="checkbox" checked={todo.completed} />
+            <input
+                type="checkbox"
+                checked={todo.completed}
+                onChange={onComplete}
+            />
             <p>{todo.content}</p>
         </div>
     )

src/components/TodoList.tsx

@@ -11,13 +11,13 @@ interface State {
     todos: Todo[]
 }
 
-const style: React.CSSProperties = {
+const defaultStyle: React.CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
 }
 
 export default class TodoList extends Component<Props, State> {
-    state = {
+    state: State = {
         todos: [],
     }
 
@@ -31,14 +31,35 @@ export default class TodoList extends Component<Props, State> {
         }
     }
 
+    onComplete = (
+        index: number,
+        event: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        const newTodos = [...this.state.todos]
+        newTodos[index].completed = !newTodos[index].completed
+        this.setState({ todos: newTodos })
+    }
+
     render() {
         return (
-            <div style={{ ...style, ...this.props.style }}>
+            <div
+                style={{
+                    ...defaultStyle,
+                    ...this.props.style,
+                }}
+            >
                 <h1>Todo List</h1>
                 {this.state.todos.map((todo, index) => (
-                    <TodoItem key={index} todo={todo} />
+                    <TodoItem
+                        key={index}
+                        todo={todo}
+                        onComplete={event => {
+                            this.onComplete(index, event)
+                        }}
+                    />
                 ))}
             </div>
+            // <h1>Hello World</h1>
         )
     }
 }