Estoy haciendo una aplicación de To Do's, tengo dos componentes, el componente ToDoApp
que básicamente es el componente principal donde se listan los to do's y donde también se crean los to dos, y el componente ToDoElement
que está conformado por el input donde se describe el to do, junto con los botones submit, clear y delete. El submit es para guardar el to do, el clear es para limpiar el input, y el delete es para eliminar el componente ToDoElement
.
Estoy intentando crear cada ToDoElement
de manera dinámica. En el componente ToDoApp
hay un botón para crear un nuevo ToDo
, este botón lo que hace es añadir un nuevo ToDoElement
al componente ToDoApp
.
En el componente principal (ToDoApp
) tengo un
const [toDos, setToDos] = useState([])
Para manejar la lista de los ToDoElement
generados cada vez que se hace clic al botón para crear un nuevo To Do.
El problema es que cuando quiero eliminar un ToDoElement
de la lista de ToDos
, al parecer cada toDos es diferente para cada ToDoElement
. Por ejemplo, si en el toDos
tengo almacenados tres ToDoElements
, y en el método handleUnmount
que es para eliminar el componente clickeado hago un
console.log(toDos.length);
me muestra un valor diferente por cada ToDoElement
.
Para el primer
ToDoElement
generado,toDos.length
es igual a 0.Para el segundo
ToDoElement
generado,toDos.length
es igual a 1.Para el tercer
ToDoElement
generado,toDos.length
es igual a 2, y así sucesivamente.
Lo ideal es que para todos los ToDoElements
generados el toDos
sea el mismo.
Aquí muestro el código tanto del ToDoApp
como del ToDoElement
(el método handleUnmount
se crea en el ToDoApp
y se le pasa mediante props al ToDoElement
)
const {useState, useRef} = React;
const ToDoApp = ()=>{
const [toDos, setToDos] = useState([]);
const handleNewToDo = e =>{
e.preventDefault();
setToDos([...toDos, <ToDoElement onUnmount={handleUnmount} id={toDos.length + 1}/>]);
}
const handleUnmount = (e, id) =>{
e.preventDefault();
console.log("toDos.length: " + toDos.length);
//setToDos(toDos.filter(element => element.id !== id));
}
return (
<div className="AppContainer">
<div className="Form ListContainer">
<h2>To Do List</h2>
<ul className="ToDoList">
</ul>
</div>
<form className="form-control Form" >
<div className="ToDoZone">
{
(
toDos.length === 0 ?
<div className="h-100 d-flex flex-column align-items-center justify-content-center">
<h2 className="text-center">Create a new To Do<br />+</h2>
</div>
:
toDos
)
}
</div>
<div className="NewToDoContainer">
<button type="button"
className="btn btn-primary NewToDoBtn"
onClick={(e)=>{handleNewToDo(e)}}
>
New To Do
</button>
</div>
</form>
</div>
);
}
const ToDoElement = (props)=>{
const input = {
data: ""
};
const inputRef = useRef();
const handleChange = (e)=>{
e.preventDefault();
input.data = e.target.value;
}
const handleSubmit = (e)=>{
e.preventDefault();
alert('Submit:' + input.data);
};
const handleReset = (e)=>{
e.preventDefault();
inputRef.current.value = "";
input.data = "";
}
return (
<div className="mt-3">
<input type="text" ref={inputRef} className="form-control" onChange={handleChange} placeholder="To Do"/>
<div className="ButtonContainer mt-3">
<button type="button" className="btn btn-primary" onClick={e =>{handleSubmit(e)}}>Submit</button>
<button type="button" className="btn btn-warning ml-5" onClick={e =>handleReset(e)}>Clear</button>
<button type="button" className="btn btn-danger ml-5" onClick={e =>props.onUnmount(e, props.id)}>Delete</button>
</div>
<hr />
</div>
);
}
// Render it
ReactDOM.render(
<ToDoApp />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Lo que quiero es que el toDos sea igual para todos, o sea, porque cuando doy click al botón Delete del ToDoElement y se ejecuta el método handleUnmount, lo que debería de hacer es cambiar el toDos mediante el setToDos para que el componente ToDoElement que se quiere eliminar ya no aparezca cuando se vuelva a renderizar la aplicación.
handleNewToDo
en vez de hacer esto para usar el estado anterior:setToDos([...toDos, <ToDoElement onUnmount={handleUnmount} id={toDos.length + 1}/>])
deberías hacer lo siguiente:setToDos(prevState => [...prevState , <ToDoElement onUnmount={handleUnmount} id={prevState .length + 1}/>])
puedes verlo mas en detalle en la documentación es.reactjs.org/docs/hooks-reference.html#functional-updatessetToDos(toDos.filter(element => element.id !== id));
solo me devuelve los toDos hasta el elemento que se quiere eliminar, por ejemplo, si tengo los elementos 1, 2, 3, 4, 5 (haciendo que estos elementos son cada ToDoElement), y quisiera eliminar el elemento 3, el setToDos solo establece los elementos 1 y 2, los elementos 4 y 5 no los deja