checkbox needing two click to react-CodePudding

im trying to make todo app. i have checkboxes on each item and im trying to change the value of checked(iscompleted) to true when i click my checkbox and it does that, but it needs two clicks to do that why is that happening im trying to solve this for very long time now

import React from "react";
import { useState, useEffect } from "react";
import { ControlPanel } from "./ControlPanel";

export const Input = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");
  const [isCompleted, setIsCompleted] = useState(false);

  const handleChange = (e) => {
    setNewTodo(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const adding = {
      task: newTodo,
      id: Math.floor(Math.random() * 100000),
      checked: isCompleted
    };
    if (newTodo.length) {
      setTodos(todos.concat(adding));
      setNewTodo("");
    }
  };
  const checkbox = (index) => {
    const check = [...todos];
    check[index].checked = isCompleted
    setIsCompleted(!isCompleted);

    setTodos(check);
    console.log(todos);
  
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTodo}
          onChange={handleChange}
          placeholder="what needs to be done?"
        />

        <ul>
          {todos &&
            todos.map((todo, index) => {
              return (
                <div>
                  <input
                  
                    checked={todo.checked ? true : false}
                    type="checkbox"
                    onChange={() => checkbox(index)}
                  />
                  <li key={todo.index}>{todo.task}</li>
                </div>
              );
            })}
        </ul>
        <ControlPanel todos={todos} />
      </form>
    </div>
  );
};

CodePudding user response：

You main issue is with this line:

check[index].checked = isCompleted

isCompleted is a component-level state, not a Todo one. Since you want to toggle the value of the checkbox based on the Todo item itself, you should do something like:

check[index].checked = !check[index].checked

And BTW, in this code:

todos.map((todo, index) => {
  return (
    <div>
      <input
        checked={todo.checked ? true : false}
        type="checkbox"
        onChange={() => checkbox(index)}
      />
      <li key={todo.index}>{todo.task}</li>
    </div>
  );
})

The key prop is not in the right place. It should be the parent element - which is, in this case, the <div> element:

todos.map((todo, index) => {
  return (
    <div key={index}>
      <input
        checked={todo.checked ? true : false}
        type="checkbox"
        onChange={() => checkbox(index)}
      />
      <li>{todo.task}</li>
    </div>
  );
})