React: can't update the state of Status, no re-render - reactjs

Question

I have been working with react for a few weeks and have encountered a problem when trying to create a todo app. When I want to update the state of status in handleStatus(), nothing happens in the browser.
handleStatus(event) {
let newStatus;
const changeState = event.status == 'done' ? newStatus = 'open' : newStatus = 'done';
this.setState({ status: newStatus });
Why I can't update this state like I did with the others? Does anyone have a solution?
Thank you very much.
Here is the full code:
import React from "react";
import { InputBar } from "./InputBar";
import { Todo } from "./Todo";
const emptyForm = {
enterTodo: ""
};
export class TodoTable extends React.Component {
constructor(props) {
super(props);
this.state = {
enterTodo: "",
todos: this.props.todos,
status: 'open'
};
this.handleEnterTodo = this.handleEnterTodo.bind(this);
this.handleStatus = this.handleStatus.bind(this);
this.handleCreateTodo = this.handleCreateTodo.bind(this);
this.handleClearTodos = this.handleClearTodos.bind(this);
this.handleDeleteTodo = this.handleDeleteTodo.bind(this);
}
//Textbox Input handler
handleEnterTodo(event) {
this.setState({
enterTodo: event.target.value
});
}
//Status handler
handleStatus(event) {
let newStatus;
const changeState = event.status == 'done' ? newStatus = 'open' : newStatus = 'done';
this.setState({ status: newStatus });
}
//delete todo
handleDeleteTodo(event) {
let todo = this.state.todos;
todo.splice(this.state.todos.indexOf(event), 1)
this.setState({ todo });
}
//Create Todo
handleCreateTodo(event) {
const todo = {
id: this.state.todos.length,
describtion: this.state.enterTodo,
status: 'open'
};
this.setState({
todos: [todo, ...this.state.todos]
})
this.state.enterTodo = emptyForm.enterTodo; // Überarbeiten
}
//Clear Todo List
handleClearTodos(event) {
let CleanedTodos = []
this.state.todos.forEach((element, index) => {
if(this.state.todos[index].status == 'open'){
CleanedTodos.push(this.state.todos[index]);
}
});
this.setState({
todos: CleanedTodos
});
}
render() {
return (
<>
<InputBar
handleCreateTodo={ this.handleCreateTodo }
handleEnterTodo={ this.handleEnterTodo }
enterTodo={ this.state.enterTodo }
handleClearTodos={ this.handleClearTodos }
/>
<Todo
handleStatus={ this.handleStatus }
todos={ this.state.todos }
handleClearTodos={ this.state.handleClearTodos }
handleDeleteTodo= { this.handleDeleteTodo }
/>
</>
);
}
}

Answer 1

Remember if your are keeping the status of done in this component then all the todos in the todo table will show they are of the status done
the best way would be each todo having its own local state of done so that each done state is unique and then handle it something like this
<p value="heyy" onClick={(e) => console.log(e.target.getAttribute("value"))}>Something</p>
OR
const Todo = (props) => {
const [done, setDone] = useState(false)
return <p onclick={() => setDone(true)} >{todo}</p>
}
todos.map(todo => {
return <Todo />
})