¿Cómo hacer la lista de tareas dinámica?

No basta con renderizar una lista de tareas, hay que hacerla dinámica para que actualice automáticamente cuando se agregan nuevos elementos. Comenzamos leyendo el input donde se introduce la nueva tarea. Implementaremos un método para capturar el cambio en el input y actualizar nuestro Array.

¿Cómo capturar los cambios en el input?

En el código, ya tenemos un input donde introducimos las tareas. Crearemos un método llamado chainHandler para recibir el valor que ingrese el usuario y almacenarlo en el Array.

fullscreen
function chainHandler(event) {
    let inputElement = event.target;
    let newTask = inputElement.value;
    // Implementar lógica para agregar nueva tarea en el Array
}

¿Cómo agregar una nueva tarea a la lista?

Para incorporar la nueva tarea sin reiniciar la lista, usaremos Signals con el método update, que nos permite modificar o incluir un nuevo valor manteniendo los existentes:

fullscreen
function chainHandler(event) {
    let inputElement = event.target;
    let newTask = inputElement.value;

    tasks.update(previousTasks => [...previousTasks, newTask]);
}

¿Qué hace el método update?

El método update en Signals crea un nuevo estado sin mutar el anterior, clonando las tareas actuales y añadiendo la nueva al final. Esto es clave para manejar estados de forma efectiva.

¿Cómo eliminar tareas de la lista?

Eliminar un elemento de la lista también debe preservar el estado sin mutar el original, utilizando Signals y creando un nuevo estado.

¿Cómo implementar el método deleteTask?

Creamos un método que reciba la posición de la tarea a eliminar y use un filtro para crear un nuevo Array sin esa tarea:

fullscreen
function deleteTask(index) {
    tasks.update(previousTasks => 
        previousTasks.filter((_, pos) => pos !== index)
    );
}

¿Cómo se integra el deleteTask en la interfaz?

Agregamos un click handler al botón de eliminación para llamar el método deleteTask con el índice de la tarea:

fullscreen
<button onclick="deleteTask(index)">Eliminar</button>

¿Cómo verificar el funcionamiento?

Podemos probarlo ingresando nuevas tareas y eliminando las existentes en la aplicación para verificar cómo el estado de la lista se actualiza de forma dinámica y eficiente. Recuerda que mantener la interfaz y la lógica de la aplicación reactividad mejora la experiencia del usuario y facilita el manejo de estados a gran escala. ¡Sigue experimentando y aprendiendo!