import React from 'react' const Todo = () => { const[newitem,setNewitem]=React.useState(""); const [list,setList]=React.useState([]); function addItem(todovalue) { if(todovalue!=="") { const newItem={ id:1 + Math.random(), value:todovalue, isDone:false } const list=[...list]; list.push(newItem); setNewitem({list,newItem:""}); } } function deleteItem(id) { const list=[...list]; const updatedlist=list.filter(item=>item.id!==id); setNewitem({updatedlist}); } function update(input) { setNewitem({newItem:input}); } return ( <div className="container"> <h1>Add an item...</h1> <input type="text" placeholder="add item" required value={newitem} onChange={e=>update(e.target.value)}/> <button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={newitem.length}>Add Todo</button> <div className="list"> <ul> { list.map(item=>{ return( <li key={item.id}> <input type="checkbox" checked={item.isDone} onChange={()=>{}}/> {item.value} <button className="btn" onClick={()=>{deleteItem(item.id)}}>Delete</button> </li> ) }) } </ul> </div> </div> ) }exportar Todo predeterminado cuando vamos a escribir texto en el campo de texto, obtiene solo [objeto Objeto] y cuando hacemos clic en el botón Agregar todo arroja el error "No se puede acceder a la 'lista' antes de la inicialización" cómo resolver eso
Aquí hay una versión de trabajo (también he implementado la función de casilla de verificación):
Tenga en cuenta que he eliminado su generación de identificación. 1 + Math.random() devolverá una identificación entre 1 y 2. Crearía un error en su lista (cada elemento necesita una clave única) y también crearía conflictos al eliminar un elemento o marcar la casilla de verificación isDone.
import React from 'react' function Todo () { const [newitem, setNewitem] = React.useState(""); const [list, setList] = React.useState([]); const addItem = (value) => { const newItem={ id: list.length +1, value, isDone:false } setNewitem("") setList(prev=> ([...prev, newItem])); } const deleteItem = (id) => { const updatedlist= [...list].filter(item => item.id !== id); setList(updatedlist); } const onCheck = (id) => { const updatedList = [...list].map(todo=> { if(todo.id === id){ return {...todo, isDone: !todo.isDone} } return todo }) setList(updatedList) } return ( <div className="container"> <h1>Add an item...</h1> <input type="text" placeholder="add item" required value={newitem} onChange={e=> setNewitem(e.target.value)}/> <button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={!newitem}>Add Todo</button> <div className="list"> <ul> {list.map(item=>( <li key={item.id}> <input type="checkbox" checked={item.isDone} onChange={()=> onCheck(item.id)}/> {item.value} <button className="btn" onClick={()=> deleteItem(item.id) }>Delete</button> </li> )) } </ul> </div> </div> ) } export default function App(){ return <Todo/> }