const { Component } = React; class Tasks extends Component { constructor (props) { super(props) this.state = { tasks: [ { task: 'take dog on a walk', completed: false }, { task: 'eat a cake', completed: false } ], newTask: '' } this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) this.markComplete = this.markComplete.bind(this) } handleChange (event) { const updatedField = event.target.value this.setState({ newTask: updatedField}) } handleSubmit (event) { event.preventDefault() const updatedArray = [] updatedArray.push(...this.state.tasks, { task: this.state.newTask, completed: false } ) this.setState({ tasks: updatedArray, newTask: '' }) } markComplete (index) { return () => { const todos = this.state.tasks const completedTask = todos[index] completedTask.completed = true this.setState({ todos }) } } render () { const taskList = this.state.tasks.map((task, index) => (

{task.task}

)) return (

tasks

{taskList}

) } } const TaskForm = ({ handleSubmit, handleChange, newTask }) => ( ) class App extends Component { render () { return (

To-Do List

) } } ReactDOM.render(, document.getElementById("root"));

cande04

Cory_To-Do List

SkvPDreVB