El siguiente componente está destinado a ser una lista de tareas pendientes. Tengo varias casillas de verificación. Tan pronto como todas las casillas de verificación estén marcadas, debería aparecer un console.log("all checked") .
Mi idea es verificar si todo.lengh === checked.length , pero no funciona.
Problema: tratar de console.log(checked.length) tampoco funciona, por lo que debe haber un problema.
¿Puede alguien ayudarme a llegar a la longitud marcada?
import React from 'react'; import { AiOutlinePlusCircle } from 'react-icons/ai'; import { useState } from 'react'; function Checkboxes() { const [todo, setToDo] = React.useState(''); const [todos, setToDos] = React.useState([]); const [checked, setChecked] = useState(false); function handleToDoSubmit(e) { e.preventDefault(); const newToDo = { id: new Date().getTime(), text: todo, completed: false, }; setToDos([...todos].concat(newToDo)); setToDo(''); } function toggleCompleteToDo(id) { const updatedToDos = [...todos].map((todo) => { if (todo.id === id) { todo.completed = !todo.completed; } return todo; }); setToDos(updatedToDos); } function allChecked(checked) { if (todo.length === checked.length) { console.log('all checked'); } } return ( <div className="ToDoList"> <form className="goalInputToDo" onSubmit={handleToDoSubmit}> <input className="goalInput" type="text" onChange={(e) => setToDo(e.target.value)} value={todo} /> <button className="AddGoalBtn" type="submit"> . <AiOutlinePlusCircle size="2em" /> </button> </form> {todos.map((todo) => ( <div className="goalItem"> <div key={todo.id}> <div>{todo.text}</div> <input type="checkbox" onChange={() => { toggleCompleteToDo(todo.id), allChecked(todo.checked); }} checked={todo.completed} /> </div> </div> ))} </div> ); } export default Checkboxes;todo es una cadena, checked es un booleano, por lo que no estoy seguro de cómo quería usarlas para verificar si todas las casillas de verificación están marcadas. Lo que podría hacer en su lugar es verificar su conjunto de todos y verificar si el accesorio completed de cada elemento es true .
Puede usar Array#every() para hacer esto. Comprueba si todos los elementos de la matriz pasan la prueba implementada por la función proporcionada:
function allChecked() { return todos.every(item => item.completed) } function App() { const [todo, setToDo] = React.useState(''); const [todos, setToDos] = React.useState([{ id: new Date().getTime(), text: 'First item', completed: false, }]); function handleToDoSubmit(e) { e.preventDefault(); const newToDo = { id: new Date().getTime(), text: todo, completed: false, }; setToDos(todos.concat(newToDo)); setToDo(''); } function toggleCompleteToDo(id) { const updatedToDos = todos.map((item) => { if (item.id === id) { item.completed = !item.completed; } return item; }); setToDos(updatedToDos); } function allChecked() { if (!todos.length) return false; return todos.every((item) => item.completed); } return ( <div className="ToDoList"> <form className="goalInputToDo" onSubmit={handleToDoSubmit}> <input className="goalInput" type="text" onChange={(e) => setToDo(e.target.value)} value={todo} /> <button className="AddGoalBtn" type="submit"> Add </button> </form> {todos.map((item) => ( <div className="goalItem"> <div key={item.id}> <input type="checkbox" onChange={() => { toggleCompleteToDo(item.id), allChecked(item.checked); }} checked={item.completed} /> <span>{item.text}</span> </div> </div> ))} <p>All checked: {allChecked() ? 'Yes' : 'No'}</p> </div> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); <div id="root"></div> <script src="https://unpkg.com/react/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>