title: Update a single property of object from array using useState() hook
body: <p>I have an array of objects in todos state hook. And I want to change a single property if it is completed. Seems I can update it but without using setTodos. I am a React beginner. </p>
  
  <pre><code>  const [todos, setTodos] = useState([]);
    const [input, setInput] = useState("");
  
    const addTodoHandler = (e) =&gt; {
      e.preventDefault();
      if (input.length &lt; 2) return;
      setTodos([...todos, { id: Date.now(), text: input, isComplete: false }]);
      setInput("");
    };
  
    const removeHandler = (id) =&gt; {
      setTodos(todos.filter((todo) =&gt; todo.id !== id));
    };
  
   const completeHandler = (id) =&gt; {
  
      // working without setTodo()
      // errors when added setTodo()
       todos.map((todo) =&gt;
         todo.id === id ? console.log((todo.isComplete = !todo.isComplete)) : ""
       );
  
    };
  
        &lt;div className="todolist"&gt;
          {todos.map((todo) =&gt; (
            &lt;Todo
              key={todo.id}
              id={todo.id}
              text={todo.text}
              removeHandler={removeHandler}
              completeHandler={completeHandler}
              isComplete={todo.isComplete}
            /&gt;
          ))}
        &lt;/div&gt;
  </code></pre>