Когда удаляю 1 задачу -- все хорошо, удаляю еще одну появляется та котрую удалял до этого.Нажимаю на галочку(handleStatusChange) появляются все три, как это решить
import React, {Component} from "react";
import "./scss/style.scss";
import todosArray from "./todosArray"
import Header from "./components/Header";
import Todo from "./components/Todo";
class App extends Component {
constructor(props) {
super(props);
this.state = {items: todosArray};
this.handleStatusChange = this.handleStatusChange.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
handleStatusChange(id) {
let resultList = todosArray.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed;
}
return todo;
});
this.setState({items: resultList});
}
handleDelete(id) {
console.log(id);
let resultList = todosArray.filter(todo => todo.id !== id);
this.setState({items: resultList});
console.log(resultList)
}
render() {
return (
<main>
<Header title={this.props.title} todos={this.state.items}/>
<section className="todo-list">
{
this.state.items.map(todo =>
< Todo
key={todo.id}
id={todo.id}
title={todo.title}
completed={todo.completed}
onStatusChange={this.handleStatusChange}
onDelete={this.handleDelete}
/>
)
}
</section>
</main>
);
}
}
export default App;
const todosArray = [
{
id: 1,
title: "Изучить JavaScript c Николаем",
completed: true
},
{
id: 2,
title: "Изучить React",
completed: false
},
{
id: 3,
title: "Написать приложение",
completed: false
}
];
export default todosArray;
[![Удаляю 3 задачу][1]][1]