const { Component } = React; class App extends Component { constructor() { super(); this.state = { task: "", tasks: [], status: 0, active: 0, isStrikeThrough: false, checked: [] }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.CrossOut = this.CrossOut.bind(this); } handleChange(event) { this.setState({ task: event.target.value }); } handleSubmit(event) { event.preventDefault(); this.setState({ task: "", tasks: [...this.state.tasks, this.state.task], checked: [...this.state.checked, this.state.isStrikeThrough], status: this.state.status + 1, active: this.state.active + 1 }); } CrossOut(id) { this.setState({ checked: this.state.checked.map((item, index) => { if (id === index) { item = !item; } return item; }) }); if (this.state.checked[id]) { this.setState({ active: this.state.active + 1 }); } else { this.setState({ active: this.state.active - 1 }); } } render() { return (

Todo List

{this.state.active} remaining out of {this.state.status} tasks

{ this.CrossOut(id); }} > {el}

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

synuhe

HyBqnwGj7

BJyw3DzjQ