Una vez que se ha realizado un elemento de la lista, es necesario configurarlo como completo para que pueda mostrarse como completo o, más adelante en la guía, no se muestre en absoluto.
Actualmente, los elementos de «todo» se importan de un archivo json y se accede directamente por el código; como vamos a empezar a cambiar los elementos de la lista, tendrán que ser almacenados en un estado de componente. Esto se hace así:
1const[items, setItems]=React.useState(todo.Items);
javascript
Este código utiliza el gancho de estado; este gancho devuelve un array y el código utiliza la desestructuración del array para obtener un estado que enumera los elementos actuales y una función – setItems – que puede ser utilizada para actualizar ese estado. En lugar de usar todo.Items para acceder a los elementos de la lista de todo, se deberían usar ahora los elementos.
Para completar un elemento de la lista, el código deberá crear una lista con la propiedad completa del elemento especificado puesta en true y pasar esta lista a setItems que actualizará el estado. Cuando el estado haya cambiado, Reactará los componentes para reflejar este cambio. Esta función establecerá un elemento como completo:
12345funcióncompletaItem(id){const actualizadoItems = items.map(item=§;(item.id=== id ?{...item, complete:true}: item));setItems(updatedItems);}javascript
Esta función utiliza la función de matriz de mapas para proyectar un nuevo elemento de la lista. Si el ID del elemento no coincide con el ID del elemento que se está estableciendo, entonces el mapa devuelve el mismo elemento; si coincide con el ID, entonces se utiliza el operador de dispersión de objetos para devolver un nuevo elemento con todas las mismas propiedades, excepto que completo se establece como verdadero. Esta nueva lista se pasa entonces a setItems y se actualizan los componentes relevantes.
Lo único que queda es permitir que un usuario establezca un artículo como completo y que muestre un artículo como completo en la interfaz de usuario; ambos cambios se harán en el componente de artículos.
En primer lugar, el componente deberá añadir un botón para que el usuario pulse para completar un elemento, y luego aceptar un nuevo accesorio de elemento completo que será una función a la que se llamará cuando se pulse el botón y que en última instancia llamará a la función de elemento completo con el ID del elemento. Finalmente, se puede añadir una clase al texto del elemento para que se muestre como completo – en el ejemplo CSS utilizado en esta guía, un elemento completo se mostrará tachado y ligeramente opaco.
El componente final del artículo se ve así:
123456789101112131415functionItem({ item, completeItem }){const itemClass =`list-group-item list-group-item-${isOverdue(item)? "danger": "info"}`;return(<li className={itemClass};<div className="item"<span className={`item-title${item.complete? "complete-item":""}"{`${item.name}" - ${formato de fecha(newDate(item.timestampDue), "dd-mmm-yyyyy")}}</span>{!item. complete&&(<button type="button" className="btn btn-link" onClick={completeItem};Complete item </button>)}</div></li>);}javascript
El nuevo buceador dentro del li está ahí para asegurarse de que el botón se muestra a la derecha del componente, el span se utiliza para mostrar el texto como completo o no, y el botón sólo se muestra si el artículo no está ya completo.
También será necesario un cambio en el uso de este componente – ahora se requiere un puntal de elemento completo. La lista de elementos se construye ahora así:
12{items.map(item={material={item.id} item={item} completeItem={()={{[fullItem(item.id)}/{))}javascript
El puntal del elemento completo se ajusta a una función de flecha que pasa el actual item.id a la función del elemento completo.