Calculando el precio total

Clase 25 de 30 • Curso de React 17 con Webpack 5 y Sass

Braulio Rivas Abad

student•

Para calcular el precio real de los elementos añadidos al carrito y poder mostrar la información correctamente, trabajaremos sobre MyOrder y OrderItem.

// OrderItem.jsx
import React from 'react';

const OrderItem = ({ product }) => {
	return (
		<div className="OrderItem">
			<figure>
				<img src={product.images[0]} alt={product.title} />
			</figure>
			<p>{product.title}</p>
			<p>{product.price}</p>
			<img src={icon_close} alt="close" />
		</div>
	);
}

export default OrderItem;

Primero, en OrderItem recordemos que desde MyOrder le estabamos pasando el producto. Sin embargo, en todos los casos estábamos mostrando una bicicleta. Ahora, para poder mostrar la información de cada producto, simplemente le indicamos al componente que recibimos como parámetro un product. Después, editamos el HTML, para que la imágen, título y precio correspondan al del producto, así que solamente accedemos a las propiedades de cada uno.

// MyOrder.jsx
const MyOrder = () => {
	const { state } = useContext(AppContext);

	const sumTotal = () => {
		const reducer = (accumulator, currentValue) => accumulator + currentValue.price;
		const sum = state.cart.reduce(reducer, 0);
		return sum;
	}

	return (
		<div className="order">
				<p>
					<span>Total</span>
				</p>
			<p>${sumTotal()}</p>
		</div>
	);
}

export default MyOrder;

Ahora, editemos el componente MyOrder. En my order, creamos una función llamada sumTotal donde creamos la lógica de la suma de los precios de los productos del carrito. Para poder crear esta función, primero creamos la función llamada reducer, en la cual le pasamos dos valores, un acumulador y un valor corriente, para después regresar la suma de ambos. Después, en la constante sum, usamos el método reduce para los arrays. El método se aplica sobre el array state.cart con todos estos elementos. Simplemente, le pasamos la función antes definida, y un valor inicial igual a cero. Por último, regresamos sum. Más abajo, en la etiqueta p, entre llaves indicamos que se ejecute esta función para calcular el precio cada vez que se renderice el componente.

Leda Michelle Huerta Recinas

student•

súper, muchas gracias, me han estado ayudando tus comentarios para compararlos con mis notas y ver que no me falte nada.

Juan Diego Garin

student•

Directamente hice la suma en el useInitialState, agregando dos funciones que hacen este trabajo. Para luego, si quiero acceder al valor TOTAL , lo puedo hacer desde cualquier lugar

import { useState } from "react";

const initialState = {
	cart: [],
	total:0,
}

const useInitialState = () => {
	const [state, setState] = useState(initialState);
 
 
	const addToCart = (payload) => {
		if(!state.cart.includes(payload)){
			setState({
				...state,
				cart: [...state.cart, payload],
				total: state.total + payload.price
			});
 
		}
	};
	const removeFromCart = (payload) =>{
		const newArray = state.cart.filter(product => product != payload);
		setState({
			...state,
			cart: [...newArray],
			total: state.total - payload.price
		});
 
 
	}
	return {
		state,
		addToCart,
		removeFromCart
	}
}

export default useInitialState;

Luis Alejandro Vera Hernandez

student•

Y de ahi como lo uso en MyOrder, compañero...? Disculpa la ignorancia aun estoy tratando de comprender bien todo esto :c

Gino Alejandro Limo Garcia

student•

Para llamarlo desde MyOrder se colocaría

<p>${state.total}</p>

JOSE MARIO ANGEL GARCIA SANDOVAL

student•

Aquí comparto un link con info sobre el método reduce() para su mayor compresión. https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

JOSE MARIO ANGEL GARCIA SANDOVAL

student•

otra forma de realizar la función seria:

const sumTotal = () => {
  let total = 0;
  state.cart.forEach(product => {
  total += product.price;
  });
 return total;
}

<div className="order">
  <p>
  <span>Total</span>
  </p>
  <p>{sumTotal()}</p>
</div>

Benjamin Lopez Petroni

student•

Tambien podrias usar un bucle for para iterar en los elementos del array y sumarlos pero con el metodo reduce evitas tener que declarar una variable pasandola por parametro, personalmente me parece mas redundante ver la funcion reduce al momento de querer entender el codigo aunque el resultado sea el mismo

David Gustavo Lopez Figueroa

student•

No pude completar esta clase: simplemenete mi componente OrderItem por alguna razon no recibe correctamente { product }. Me sale exactamente el mismo error en consola que al profe, pero no lo arreglo la S como en la clase. Que frustrante.

Erwin Jiménez

student•

en el props que le pasas a OrderItem coloca product={ product[0] }, el error se debe a una actualizacion de React por lo cual para poder pasar correctamente ese parametro hay que hacer una deconstruccion del prop que le estas pasando, pero asi como te lo estoy diciendo funciona igual

Fernando Cordero

student•

Pudiste resolverlo? Yo tenia un <OrderItem /> demas

Uriel Alberto Arevalo Franco

student•

Probé la siguiente pieza de código para sumar los precios de MyOrder. Funciona bien.

const sumTotal = () => {
    let total = 0;
    state.cart.forEach((product) => {
      total += product.price;
    });
    return total;
  };

El profe nos presentó esta solución

const sumTotal = () => {
    const reducer = (acumulador, currentValue) =>
      acumulador + currentValue.price;
    const sum = state.cart.reduce(reducer, 0);
    return sum;
  };

¿Qué ventaja tendría la del profe Óscar? ¿Tiene un desempeño mejor como hook?

Andrés Muñoz

student•

En cuanto a desempeño tendría que existir un carrito con cientos de miles tal vez millones de items para ver una diferencia significativa. Ambos métodos cumplen el objetivo, la única diferencia que veo es en el estilo del código la del profe Oscar es mas funcional por lo general así suelen hacer sumas programadores más experimentados, aparte del estilo no veo diferencias relevantes.

Melvin Antonio Hernandez Serrano

student•

Estuve 2 horas sin que me saliera, verifiquen el archivo MyOrder que esta en containers.

Yo tenia importe 2 veces OrderItem dentro del archivo y era el porque no me salia jaja.

Jamas se rindan, ya le estoy agarrando el gusto a reirme de errores bien tontos que tengo.

Lautaro Strappazzon

student•

Tengo un problema. Creo que no me está importando correctamente los productos de la API en el container MyOrder (ya que hice un console.log(product.title) y me sale undefined) y por lo tanto tampoco en OrderItem Esto hace que se me rompa la app cuando despliego myorder del header Saben cuál puede ser el problema?

import React, { useContext } from 'react';
import OrderItem from '@components/OrderItem';
import AppContext from '../context/AppContext';
import '@styles/MyOrder.scss'

import arrowIcon from '@icons/flechita.svg';

const MyOrder = () => {
	const { state } = useContext(AppContext);

    return (
        <div className="my-order">
            <div className="my-order-container">
                <div className="title-container">
                    <img src={arrowIcon} alt="arrow" />
                    <p className="title">Shopping cart</p>
                </div>
                <div className="my-order-content">
                {state.cart.map( (product) => (
                    <OrderItem product={product} key={`orderItem-${product.id}`} />
                ))}
                    <div className="order">
                        <p>
                            <span>Total</span>
                        </p>
                        <p>
                            <span>$44.00</span>
                        </p>
                    </div> 
                    <button className="primary-button">Checkout</button>
                </div>
            </div>
        </div>
  )
}

export default MyOrder

import React from 'react';
import '@styles/OrderItem.scss';
import close from '@icons/icon_close.png'

const OrderItem = ({ product }) => {
	return (
		<div className="OrderItem">
			<figure>
				<img src={product.images[0]} alt={product.title} />
			</figure>
			<p>{product.title}</p>
			<p>${product.price}</p>
			<img src={close} alt="close" />
		</div>
	);
}

export default OrderItem;

Juan Felipe Obregón Rodríguez

student•

tengo exactamente el mismo problema

David Prado

student•

Hola Lautaro, yo tuve el mismo error. Leyendo los comentarios me di cuenta que el component ProductItem.jsx no enviaba product a addToCart, por lo que product era undefined.

Para solucionarlo tienes que enviar el parametro product en el evento onClick dentro de ProductItem.jsx

				<figure onClick= {()=> handleClick(product)} >

Esto hace que al hacer click en la figura del carrito, se envie la propiedad product a addToCart.

	const handleClick = item => {
		addToCart(item);
	}

espero que eso haya resulto el tu problema.

Robinson Gonzalez

student•

Hay un bug al seleccionar el mismo item, al hacer eso, se asigna el mismo key en la iteración y esto lo marca como error en la consola

Jesus Arturo Carmona Aguirre

student•

Igual observe ese error. Yo lo solucione de la siguiente manera:

Espero te sea de ayuda

Cesar Gabriel Mejias Farreras

student•

Ahora con el código que hace el profe en la suma total aparece un NaN y eso es porque estamos retornando un Array. Lo único que haremos es lo siguiente:

const sumTotal = () => {
		const reducer = (accumalator, currentValue) => accumalator + currentValue[0].price
		const sum = state.cart.reduce(reducer, 0)
console.log(state.cart)
		return sum
	}

Me di cuenta cuando revise que estaba retornando con el console.log

Samuel Miranda Martínez

student•

Hay alguna clase (en todo platzi) en la que expliquen mejor como funciona el reduce de un arreglo?

Samuel Miranda Martínez

student•

Curso de Manipulación de Arrays en JavaScript

Wilfredo Morales

student•

Yo sume el total dentro de la etiqueta p usando metodos de manipulación de arrays

<p>${state.cart.map(product => parseFloat(product.price)).reduce((a,b) => a + b)}</p>

JOSE RANGEL

student•

Hola, pueddes usar únicamente el Reduce sin necesidad del map. Esto mejorará la legibilidad de tu código. Saludos!

LEONARD CUENCA

student•

Enlaces

Con esto podras ver tus hooks y sus valores internos. usando Dev Tools.
React Developer Tools

David Gustavo Lopez Figueroa

student•

Hola compañeros , alguien me podria ayudar, por alguna razón usar las variables product no me funciona al momento de renderizar me pasa el mismo problema que al profesor en la clase pero mi código no se solucionó al agregar la s en images. chequen

Este es el código en mi OrderItem.jsx:

import React from "react";
import '../styles/OrderItem.scss';

import close from "@icons/icon_close.png";

const OrderItem = ({product}) => {
  return (
    <div className="order-item">
      <figure>
        <img
          src={product.images[0]}
          alt={product.title}
        />
      </figure>
      <p>{ product.title }</p>
      <p>${ product.price }</p>
      <img src={close} alt="close" />
    </div>
  );
};

export default OrderItem;

Si le pongo [0] al src en product.images me sale este error en consola:

OrderItem.jsx:17 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at OrderItem (OrderItem.jsx:17)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23959)
    at performUnitOfWork (react-dom.development.js:22774)
    at workLoopSync (react-dom.development.js:22702)The above error occurred in the <OrderItem> component:

    at OrderItem (webpack://react-shop/./src/components/OrderItem.jsx?:13:22)

El mismo que al profe en la clase pero como pueden ver en la imagen el componente ni si quiera esta recibiendo bien el product

Para la imagen de arriba comento toda la url de la etiqueta img porque si no tira el error. Ya estuve intentando buscando si me falto agregar o si falta algo en mi código pero no lo encuentro. Que será????

Santi Orduno

student•

Tuve el mismo error y cheque como estaba MyOrder.jsx y encontre que mi error fue como abrí y cerre la etiqueta

<OrderItem>

Quizás tengas algun typo dentro de tu código en MyOrder.jsx

Jorge Garcia

student•

yo tengo justamente el mismo error, al parecer es como que si no recibiera el objeto product y por eso no encuentra definido ningun parametro del objeto. ya intente de muchas maneras y no e logrado arreglar el error

david jurado

student•

Increíble la explicación del reducer, no entendí nada

Misael Gomez

student•

Comparto la documentación para el método del reducer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Alejandro Mejia Escobar

student•

Otra manera de sacar la suma total es con la función .reduce() de JS:

const totalPrice = cartInfo.reduce((total, currentObj) => {
    return total += currentObj.price
  }, 0);

Juan Camilo Zuniga

student•

Hola sucede que tengo el codigo igual al del profe pero me aoarece el error de "Cannot read properties of undefined (reading 'images')"

sucede que el mismo proceso fue usado en el MyOrder y sin problemas muestra items en la pagin principal pero cuando es de mostrarlos en el resumen de compra me aparece ese error ya revise varias veces porfa ayuda

import React from 'react';
import 'styles/OrderItem.scss';
import close from 'icons/icon_close.png'

const OrderItem = ({ product }) => {
	return (
		<div className="OrderItem">
			<figure>
				<img src={product.images[0]} alt={product.title} />
			</figure>
			<p>{product.title}</p>
			<p>${product.price}</p>
			<img src={close} alt="close" />
		</div>
	);
}

export default OrderItem;

este es el codigo de orderitem

import React, {useContext} from 'react';
import OrderItem from '../components/OrderItem';
import AppContext from "../context/AppContext";
import '../styles/MyOrder.scss';
import flechita from "icons/flechita.svg";

const MyOrder = () => {
	const {state} = useContext(AppContext);
	return (
		<aside className="MyOrder">
			<div className="title-container">
				<img src={flechita} alt="arrow" />
				<p className="title">My order</p>
			</div>
			<div className="my-order-content">
				{state.cart.map(product=>(
					<OrderItem product={product[0]} key={`orderItem-${product.id}`} />
				))}
				<OrderItem />
				<div className="order">
					<p>
						<span>Total</span>
					</p>
					<p>$560.00</p>
				</div>
				<button className="primary-button">
					Checkout
				</button>
			</div>
		</aside>
	);
}

export default MyOrder;

y este el codigpo de MyOrder

Anyelo Leonardy Alvarez Baquero

student•

? Por que en este caso si podemos poner la función dentro del html con paréntesis:

<p> ${ sumTotal() } </p>

Y cuando lo hacíamos con el onClick no? :

<p onClick={ funcion} > </p>

Gracias de antemano por las respuestas.

Juan Carlos Montilla Sánchez

student•

Hola, Anyelo.

Debemos tener en cuenta que cuando queremos que un evento se ejecute cuando se realice una acción, por ejemplo, un click, necesitamos que no se ejecute al inicializar el render, ya que no tendría ningún sentido. En cambio, si quieremos llevar a cabo una suma de un valor pero ver su valor actual, como el total de compras que tenemos en nuestro carrito, sí se puede ejecutar de una renderice la app

Soraimar Claivel Bernal Camacho

student•

Hola amig@s!

¿La lógica de totalización y agrupar productos es mejor manejarla en el back-end o el front-end??

Hermes Aguilar

student•

La lógica de negocio, habitualmente se maneja desde el back. Pero que tal si me explicas un poco más, porque creo que no entiendo del todo tu pregunta.

Calculando el precio total

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js