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

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 />
    })