Pull Request Alexis and Jesse React-I

src/App.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import TodoList from './Components/TodoList';
 
 const App = () => (
   <div>
     <h2>Todo App</h2>
-
+    <TodoList />
   </div>
 );
 

src/Components/Todo.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Todo(props) {
+    const strikeHandler = () => {
+        props.toggleCompleted(props.index)
+    }
+
+    const strikeThrough = {textDecoration: props.todo.clicked ? 'line-through' : 'none'}
+
+    return (
+        <div style={strikeThrough} className="todo">
+            <input type="checkbox" value={props.clicked} onClick={strikeHandler} />
+            {props.todo.body}
+        </div>
+
+    );
+}
+
+export default Todo

src/Components/TodoList.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import Todo from './Todo'
+
+
+class TodoList extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+            Todos: [],
+            nextTodo: "",
+        };
+    }
+
+
+    toggleCompleted = (index) => {
+        const todos = this.state.Todos;
+        todos[index].clicked = !todos[index].clicked
+        this.setState({todos})
+    }
+
+    todoChange = event => {
+        this.setState({nextTodo: event.target.value });
+    }
+
+    todoSubmit = event => {
+        event.preventDefault();
+        const nextTodos = {body: this.state.nextTodo, clicked: false};
+        const todosArray = this.state.Todos;
+        todosArray.push(nextTodos);
+        this.setState({Todos: todosArray, nextTodo: "" });
+    };
+
+    render() {
+        return (
+            <div>
+                {this.state.Todos.map((todo, index) => {
+                    return(
+                        <Todo todo={todo} toggleCompleted={this.toggleCompleted} index={index} key={index} />
+                    );
+                })}
+                <form onSubmit={this.todoSubmit}>
+                    <input
+                    type="text"
+                    value={this.state.nextTodo}
+                    onChange={this.todoChange}
+                    />
+                </form>
+
+            </div>  
+        );
+    }
+}
+
+export default TodoList;