"todos mark complete"

src/App.js

@@ -1,11 +1,44 @@
 import React, { Component } from 'react';
 import './App.css';
+import Todos from "./components/Todos";
 
 class App extends Component {
+  state = {
+    todos: [{
+      id:1,
+      title: "take out the trash",
+      completed: false
+    },
+    {
+      id:2,
+      title: "dinner with wife",
+      completed: false
+    },
+    {
+      id:3,
+      title: "meeting with boss",
+      completed: false
+    }
+  ]
+  }
+
+  //toggle complete
+  markComplete=(id)=>{
+    this.setState({todos:this.state.todos.map(todo =>{
+      if(todo.id === id){
+        todo.completed = !todo.completed
+      }
+      return todo;
+    }
+
+    )});
+}
   render() {
+    // console.log(this.state.todos)
     return (
       <div className="App">
-        <h1>App</h1>
+        <Todos todos={this.state.todos} markComplete={this.markComplete}/>
+
       </div>
     );
   }

src/components/TodoItem.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from "prop-types";
+
+
+export class TodoItem extends Component {
+    getStyle=() =>{
+        return{
+            background: '#f4f4f4',
+            padding: '10px',
+            borderBottom: '1px #ccc dotted',
+            textDecoration: this.props.todo.completed ? 'line-through' : 'none'
+        }
+    }
+
+    markComplete=(e)=>{
+        console.log(this.props)
+    }
+  render() {
+        const {id, title} = this.props.todo;
+    return (
+      <div style={this.getStyle()}>
+        <p>
+        <input type="checkbox" onChange={this.props.markComplete.bind(this, id)}/>{' '}
+        {title} 
+        </p>
+      </div>
+    )
+  }
+}
+
+//prop types
+
+TodoItem.propTypes={
+    todo:PropTypes.object.isRequired
+}
+
+export default TodoItem

src/components/Todos.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import TodoItem from "./TodoItem";
+import PropTypes from "prop-types";
+
+class Todos extends Component {
+
+  render() {
+      console.log(this.props.todos)
+    return this.props.todos.map((todo)=>(
+        <TodoItem key={todo.id} todo={todo} markComplete={this.props.markComplete}/>
+    )
+    );
+  }
+}
+
+//prop types
+Todos.propTypes={
+todos:PropTypes.array.isRequired
+}
+
+export default Todos;