title: weird 'id's and checkboxes behaviour with React Hooks
body: <p>I am building a simple 'To do list' using React Hooks. Right now I am having two problems:</p>
  
  <p>1) first two list items have identical 'id' values (even though I increment the counter...)
  <a href="https://i.stack.imgur.com/EYio4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EYio4.png" alt="enter image description here"></a></p>
  
  <p>2) the checkboxes are checked and updated only after double click</p>
  
  <p>I will be grateful for your tips, clues, review, advice and solutions! :-) </p>
  
  <p>This is the 'ToDoList' component:</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import ListItem from './ToDoItem';
  
  const ToDoList = () =&gt; {
  let [counter, setCounter] = useState(1);
  let initialItem = {
      id: counter,
      name: '',
      time: '',
      finished: false,
  }
  
  const [tasks, setTasks] = useState([]);
  useEffect(() =&gt; console.log('THE ARRAY OF TASKS', tasks), [tasks]);
  
  const [task, setTask] = useState(initialItem);
  
  const handleSubmit = (e) =&gt; {
      e.preventDefault();
      setCounter(counter + 1);
      setTask(prevState =&gt; {
          return { ...prevState, id: counter}
      });
      setTasks([...tasks, task]);
      setTask(initialItem);
  }
  
  const deleteItem = (id) =&gt; {
      let newTasks = tasks.filter((item, index) =&gt; {
          return index !== id
      });
      setTasks(newTasks);
  }
  
  const handleCheckbox = (val, id) =&gt; {
      tasks.map((element) =&gt; {
          if (element.id === id) {
              element.finished = val
          }
      })
      console.log('UPDATED TASKS', tasks)
  }
  
  return (
      &lt;div&gt;
          &lt;form onSubmit={handleSubmit}&gt;
              &lt;input placeholder="Add a task" value={task.name} onChange={(e) =&gt; {
                  let value = e.target.value;
                  setTask(prevState =&gt; {
                      return { ...prevState, name: value }
                  })
              }}&gt;&lt;/input&gt;
  
              &lt;input placeholder="Add time" value={task.time} onChange={(e) =&gt; {
                  let value = e.target.value;
                  setTask(prevState =&gt; {
                      return { ...prevState, time: value }
                  })
              }}&gt;&lt;/input&gt;
              &lt;button&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
          &lt;ListItem tasks={tasks} delete={deleteItem} checked={handleCheckbox} /&gt;
      &lt;/div&gt;
  )
  }
  
  export default ToDoList;
  </code></pre>
  
  <p>And this is the 'ListItem' component:</p>
  
  <pre><code>import React, { useState } from 'react';
  
  
  function ListItem(props) {
      const tasks = props.tasks;
      const [isChecked, setIsChecked] = useState(false);
  
      return tasks.map((element, index) =&gt; {
          return &lt;li key={index}&gt;
              {element.name}: {element.time}
              &lt;button onClick={() =&gt; props.delete(index)}&gt;delete&lt;/button&gt;
              &lt;label className="container"&gt;
                  &lt;input type="checkbox" checked={element.finished}
                      onChange={(e) =&gt; setIsChecked(!isChecked)} 
                      onClick={(e) =&gt; {props.checked(isChecked, element.id);}}&gt;
                  &lt;/input&gt;
                  &lt;span className="checkmark"&gt;&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
      })
  }
  
  export default ListItem;
  </code></pre>