1.- El spread operator

Habíamos dejado nuestro avance hecho hasta el punto de tener el carrito mostrandose en el sitio, si intentamos agregar un curso a este, tal curso si aparecerá en el carrito, pero si intentamos agregar otro, este nuevo curso reemplaza al anterior, no se agregá al carrito sumándose al anterior, sino que más bien, sobreescribe el contenido del array a solo tener un valor de nuevo; eso sucede porque en el código simplemente tienes esta línea:

         setContenidoCarrito([curso])

Dicha línea sólo le da al estado un nuevo y único “curso” cada vez, para corregirlo debo introducirles un concepto del que hasta ahora no he hablado, se trata del spread operator; recuerda que lo que queremos es que se agreguen los cursos uno tras de otro en el array que tenemos en nuestro estado “contenidoCarrito”; por lo que la solución sería ir agregando valores al array, una forma de hacer esto lo vimos en la unidad uno, con push ¿recuerdas? 

         setContenidoCarrito(contenidoCarrito.push(curso))

Pero push no nos servirá, (además que la línea anterior no debería ser el argumento de la función set) porque como ya mencione dos lecciones atrás, tú no debes modificar tu state directamente, o bueno igual y si puedes, pero hay una gran razón para no hacerlo, ni con push, ni igualandole directamente un nuevo valor, ¿y por qué? porque para eso existen las funciones set que extraes cada que creas un estado, con el valor que le das a la función set, estas actualizando el valor de un estado, así que ese es el problema, cómo agregamos valores al estado, sin alterar el estado mismo, es decir lo único permitido es actualizarlo con su función set ¿como podriamos hacer? pues una solución es con el spread operator, antes de mostrarte cómo funciona, probemos algo, si creas un nuevo array que tenga el contenido del carrito, y a ese array le agregas el curso que se haya clicado, para que así luego le des ese array a la función set, ¿funcionaria?¿lograrías actualizar el estado? pues no habría un error, porque no estamos alterando el state directamente, oh eso parece.

        const array = contenidoCarrito;
        array.push(curso);
        setContenidoCarrito(array)

El código anterior realmente no va a funcionar por una sencilla razón, no se si lo sepas, pero cuando tu asignas el valor de un array con otro array, no estás creando una copia estas pasando un valor por referencia, ¿y referencia a donde? pues en esta caso, en referencia a tu estado, así que nuevamente, estás alterando el estado, por eso lo anterior no va funcionar, entonces, el spread operator o operador de propagación ¿como resuelve este problema? pues haciendo que el array se expanda, y bueno hacer que se expanda, o solo expandir, es un traducción no tan exacta de spread, pero se refiere tanto a agregar nuevo contenido al array como a hacer una copia del mismo, me explico, es cuando quieres incluir en un nuevo array, u objeto, los elementos de un array, u objeto ya existentes, porque si, la también llamada sintaxis spread puede aplicarse en objetos, y hacer una copia es justo lo que queremos hacer, no tener una referencia al estado, que es lo que conseguimos hasta ahora, por lo que para ello tienes que hacer este cambio:

        const array = [...contenidoCarrito];
        array.push(curso);
        setContenidoCarrito(array)

Esos tres puntos son la famosa spread syntax, y hay tres lugares en los que tu puedes usarlo: en un objeto, en los argumentos de una función, y para nuestro caso, en arrays; con ese simple cambio ya tenemos lo que queremos, una copia, por lo que aplicar el push ya funcionaria.

2.- UseState y las funciones set

¿Qué pasa si intentamos probar el código sin el operador spread? si quitamos los tres puntos, y lo ponemos todo como estaba antes van a notar el problema que surge de editar el estado directamente, que es, no tener una respuesta visual, (ni siquiera en consola) si agregas un curso al carrito, este no se mostrará dentro del mismo y ¿por qué no se agregó el curso? bueno, de eso te hable en la lección 10, no puedes editar el estado directamente, porque cuando lo haces así, incluso usando su función set, no habrá rerenderizado, recuerda que al igualar el array al valor del estado (asignación) el array se vuelve una referencia que apunta al estado mismo, no estás creando una copia, ¿y de donde viene eso de no editar el estado? pues de la misma documentación:

A pesar de usar la función set, se omite el rerenderizado porque array y estado son el mismo objeto, ojo solo se omite el renderizado, si tú provocas otro renderizado, notaras que al final si se cambio el contenido del carrito, ahí está el curso que clicamos antes, pero aver, ¿tu para que quieres alterar el estado si no para mostrar un cambio? por eso digo que es una razón de peso, tu lo que quieres es el rerenderizado para mostrar tus cambios y eso no lo tendrás si no sigues la reglas de React.

img

Les menciona que el operador spread se podía usar en los argumentos de una función, en objetos y en los arrays; por lo que podemos aprovecharnos del primero de esos casos, para usarlo directamente como argumento de la función set, y así agregar el curso clicado al final del array, como un nuevo elemento, reduciendo todo a una línea porque ya no necesitaremos del push. 

         setContenidoCarrito([...contenidoCarrito, curso]) 

3.- Terminando las funcionalidades del carrito:

3.1.- Borrar cursos del carrito

Con el carrito agregando cursos correctamente, ya podemos avanzar con lo siguiente, el borrado, hay que hacer que los botones de borrar y el gran botón de vaciar carrito, funcionen, el proceso es similar a lo trabajado con manejador click curso, primero procedemos con una nueva función, que se llamara manejador click equis, que requerirá de parámetro, el id del curso:

          const manejadorClickX = id => { }

En el cuerpo de la función vamos a crear una constante llamada “nuevoContenido”, que va a filtrar el contenido del carrito según si el curso tiene o no el mismo id, es decir, recorremos uno a por uno los cursos del carrito, con filter, y si el curso tiene el mismo id que el dado como parámetro, no lo incluimos en la constante, 

          const nuevoContenido = contenidoCarrito.filter( curso => curso.id !== id);

¿y de dónde sale este id? pues va ser el id del curso que se quiere borrar del carrito, recuerda que estamos armando una fila con cada curso que llega al carrito y como tenemos una fila donde está la “equis”, es allí donde pondremos el manejador click equis, además como también tenemos ahí el objeto curso con toda su info, (lo recuperamos del estado contenidoCarrito) de ahí sacamos el id para pasarlo a la función.

imagen

El resto de pasos los repetimos muchas veces la lección anterior, tienes que extraer la función “manejadorClickX” del contexto Tienda y poner disponible la función en el proveedor con todo eso listo, ya puedes probar el borrado de cursos del carrito. (si van a funcionar)

3.2.- Vaciar el carrito

A diferencia de los botones individuales para borrar cada curso, el botón vaciar carrito, debe quitar todos los cursos que hayan hasta el momento, lograr esto con todo lo que ya sabemos será mucho más fácil, requeriremos una nueva función, que se llamara manejador clic vaciar, y lo único que va ha hacer es actualizar el estado a un array vacío:

          const manejadorClickVaciar = () => setContenidoCarrito([]);

Extraemos dicha función del contexto y la creamos y agregamos a los valores del proveedor; ahora busquemos el botón vaciar carrito en el componente carrito, que es una etiqueta a, (así era en la unidad uno eres libre de cambiarlo a button si gustas), y allí le agregas el onclick. Un detalle importante a tener en cuenta es que en carrito.jsx tenemos una key, recuerda que las keys no se debe repetir, pero eso es posible que pase porque estamos usando para cada elemento el id del curso, por lo que si ingresas al carrito, dos veces el mismo curso, tendrías un error porque habría dos elementos con la misma key, para ello tienes que agregar una condición que evite que se pueda agregar un curso ya agregado al carrito.