I’m trying to build a simple todo list in react. My todo lists have the checkbox, the text for the todo list and a button to delete the todo. My problem is that, when i delete the todo when the checkbox is checked, a variable that i keep to control how many todo there is and how many todos have been marked as done(as checked) does’t update. So, for example, i have 5 todos in my list and i have three checked. If i delete one of the todos, my variable that counts three as done still will show 3 done when i actually have two.
The component where todos are listed
import styles from "./Todos.module.css"
import {PlusCircle} from "phosphor-react";
import { Todo } from "./Todo";
import { ChangeEvent, FormEvent, useState } from "react";
export function Todos()
{
const [todoList, setTodoList] = useState([""]);
const [newTodo, setNewTodo] = useState("");
function handleTodo(e:FormEvent)
{
e.preventDefault();
setTodoList([...todoList, newTodo]);
setNewTodo("");
}
function handleTodoText(e:ChangeEvent<HTMLTextAreaElement>)
{
setNewTodo(e.target.value);
}
function handleTodoToDelete(todoToDelete:string)
{
const newTodoList = todoList.filter(todo =>{
return todo != todoToDelete;
})
setTodoList(newTodoList);
}
let tasksCreated = todoList.length - 1;
return (
<div>
<header>
<form className={styles.todoBox} onSubmit={handleTodo}>
<textarea value={newTodo} className={styles.addTodo} required onChange={handleTodoText} name="addTodo" placeholder="Adicionar uma nova tarefa"></textarea>
<button type="submit">Criar <PlusCircle size={20}/> </button>
</form>
</header>
<main>
<div className={styles.monitorTodos}>
<p className={styles.tasksCreated}>Tarefas Criadas <span>{tasksCreated}</span></p>
<p className={styles.tasksDone}>Concluidas <span id="tasksDone">0</span></p>
</div>
<div className={styles.listTodos} >
{
todoList.map(todo =>{
if (todoList.length > 1 && todo.length != 0)
return <Todo todoText={todo} deleteTodo={handleTodoToDelete} todoCount={tasksCreated}/>
})
}
</div>
</main>
</div>
)
}
My todo component
const [checked, setCheckedState] = useState(false);
let checkboxesChecked:NodeListOf<HTMLInputElement> = document.querySelectorAll('input:checked');
let checkBoxesCount = checkboxesChecked.length;
var tasksDone = document.getElementById("tasksDone") as HTMLSpanElement | null;
function handleChange(event:ChangeEvent<HTMLInputElement>)
{
setCheckedState(event.target.checked);
}
if (tasksDone != null)
tasksDone.innerHTML = checkBoxesCount.toString() + " de " + content.todoCount.toString();
function handleDeleteComment()
{
content.deleteTodo(content.todoText);
}
return (
<main className={styles.todo}>
<div className={styles.todoContent}>
<Checkbox
name={content.todoText}
icon={<RadioButtonUncheckedRoundedIcon/>}
checked={checked}
onChange={handleChange}
checkedIcon={< CircleCheckedFilled /> }
sx={checkStyle}
/>
<span className={checked ? styles.done : styles.undone} >{content.todoText}</span>
</div>
<button onClick={handleDeleteComment}>
<Trash size={18}/>
</button>
</main>
)
I tried updating the variable that counts the done todos inside the function that deletes the todo from the list and it didn’t even change the value of the variable.