title: React changing records properties via map function does not work correctly
body: <p>I have a wired behavior within my react app. I have tried to create a simple to-do list once I check the item I wanted to update the checkbox via the <code>onChange</code> method (handled by the parent <code>App</code> componenet) which loops through the previous list of tasks and changes the one with the selected id. Once I do <code>task.completed = !task.completed</code>. I am getting this wired result:</p>
  <p>completed is true and then false?!!! I could not figure out what could be this.</p>
  <pre><code>{id: 2, text: &quot;Wash my teeth&quot;, completed: true}
  completed: false
  id: 2
  text: &quot;Wash my teeth&quot;
  __proto__: Object
  </code></pre>
  <p>Here is my TodoItem component:</p>
  <pre><code>function TodoItem({task, handleChange}){
      return(
          &lt;div className=&quot;todo-item&quot;&gt;
              &lt;input type=&quot;checkbox&quot; 
                  onChange={() =&gt; handleChange(task.id)}
                  checked={task.completed}
              /&gt;
              &lt;p&gt;{task.text}&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  
  export default TodoItem;
  </code></pre>
  <p>And here is my App component:</p>
  <pre><code>class App extends React.Component {
  
    constructor(){
      super()
      this.state = {
        todos: tasks
      }
    }
  
    handleChange = (id) =&gt; {
      this.setState(prevState =&gt; {
        const updatedTodos = prevState.todos.map(task =&gt; {
          if (task.id === id){
            task.completed = !task.completed
            console.log(task)
          }
          return task
        }) 
        return {
          todos: updatedTodos 
        }
      })
    }
  
    render(){
      console.log('render')
     
      const todoItems = this.state.todos.map(item =&gt;  {
        return (
          &lt;TodoItem 
            key={item.id} 
            task = {item} 
            handleChange={this.handleChange}
          /&gt;)
        });
  
  
        return (
          &lt;div className=&quot;todo-list&quot;&gt;
            {todoItems}
          &lt;/div&gt;
        );
      
    }
  
  }
  
  </code></pre>