const { Component } = React; class App extends Component { constructor(props) { super(props); this.state = { value: '', tasks: [ 'Finish Promise Lesson', 'Build Simple React ToDo App', 'Walk Chassie the Golden' ], addOrInvalidText: 'Add New Task' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.clearTasks = this.clearTasks.bind(this); this.deleteTask = this.deleteTask.bind(this); } handleChange(e) { this.setState({ value: e.target.value }); } handleSubmit(e) { const { value, tasks } = this.state; e.preventDefault(); if (value && !/^\s+$/.test(value)) { this.setState({ value: '', tasks: tasks.concat(value), addOrInvalidText: 'Add New Task' }); } else { this.setState({ addOrInvalidText: 'No Empty Task', value: '' }); } } deleteTask(index) { const { tasks } = this.state; const taskClone = [...tasks]; console.log(taskClone); taskClone.splice(index, 1); this.setState({ tasks: [...taskClone] }); } clearTasks() { this.setState({ tasks: [] }); } render () { const { value, tasks, addOrInvalidText } = this.state; return (

React Todo App

For Your Productivity

Task #{index + 1}: {task}

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