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