1

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.

2
  • 1
    Un comentario al margen. En la funció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-updates Commented el 3 feb. 2023 a las 0:27
  • @AndresGardiol me funcionó tu sugerencia, muchas gracias, pero ahora no se por qué el método handleUnmount, que ejecuta la instrucción setToDos(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
    – Jesus Diaz
    Commented el 3 feb. 2023 a las 0:53

1 respuesta 1

1

Yo creo que se podría hacer de otra manera. Las funciones estar en el componente principal y el componente ToDoElement solo tener el código jsx, delegar la ejecucion de las funciones en el padre. Además de no guardar en la variable toDos elementos JSX, mejor un array de objetos y con estos valores renderizar tantos todoelements como haya. Quedaría asi el codigo.

Componente APP:

function App() {
const [toDos, setToDos] = useState([]);

const handleNewToDo = e =>{
  e.preventDefault();
  const newId = toDos.length === 0 ? 1 : toDos[toDos.length - 1].id + 1;
  console.log(toDos.map(x => x.id), Math.max([1,2,]))
  setToDos([...toDos, {id: newId, title: ""}]);
}

const handleUnmount = (id) =>{
  console.log(toDos);
  setToDos(toDos.filter(x => x.id !== id))
}

const handleChange = (value,id)=>{
  setToDos(toDos.map(x => {
  const newTodo = {...x}
  if(x.id === id) newTodo.title = value;
  return newTodo
  }));

}

 const handleSubmit = (id)=>{
    // alert(`Submit: ${input.data}`);
 };

const handleReset = (id)=>{
    handleChange("", 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.map((x,index) =>{
                        return <ToDoElement key={index} handleChange={handleChange} handleSubmit={handleSubmit}
                                 handleReset={handleReset} onUnmount={handleUnmount} data={x} />
                      })
              )
          }
          </div>
          <div className="NewToDoContainer">
              <button type="button" 
                      className="btn btn-primary NewToDoBtn"
                      onClick={(e)=>{handleNewToDo(e)}}        
              >
                  New To Do
              </button>
          </div>
      </form>
  </div>)
}

Este el componente ToDoElement:

import React from "react";

const ToDoElement = (props)=>{

    const {handleChange, handleSubmit, handleReset, onUnmount, data} = props;

    return (
    <div className="mt-3">
        <input type="text" value={data.title} className="form-control" onChange={(e)=>handleChange(e.target.value, data.id)} placeholder="To Do"/>
        <div className="ButtonContainer mt-3">
            <button type="button" className="btn btn-primary" onClick={e => handleSubmit(data.id)}>Submit</button>
            <button type="button" className="btn btn-warning ml-5" onClick={e => handleReset(data.id)}>Clear</button>
            <button type="button" className="btn btn-danger ml-5" onClick={e => onUnmount(data.id)}>Delete</button>
        </div>
        <hr />
    </div>
);
}

export default ToDoElement;

Falta la funcion submit, que no se que quieres hacer. Pensaba que podría ser guardar el valor del texto, pero ya lo voy guardando en el onchange.

Espero haberte ayudado

3
  • Por qué sugieres no guardar elementos jsx en el toDos? qué ventajas tendría?
    – Jesus Diaz
    Commented el 3 feb. 2023 a las 0:58
  • 2
    Pues para que crear los elementos cuando puedes guardar solo los datos. Y si posteriormente quieres guardarlos en algún sitio??? Aparte que estarías creando 3 funciones para cada elemento
    – Suso
    Commented el 3 feb. 2023 a las 1:03
  • muchas gracias, me ayudó
    – Jesus Diaz
    Commented el 3 feb. 2023 a las 1:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.