Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

73
Visualizações
javascript multiply inside map function

i need to find the total price in a cart,i have to multiply the quantity that is coming from local storage with the price coming from an API

var storage = JSON.parse(localStorage.getItem("cart"));

cart.map((order_item, index) => {
  return (
    <li
      key={index}
      className="header-cart-item flex-w flex-t m-b-12"
    >
      <div className="header-cart-item-img">
        <img src={order_item.image} alt="IMG" />
      </div>

      <div className="header-cart-item-txt p-t-8">
        <a
          href="#"
          className="header-cart-item-name m-b-18 hov-cl1 trans-04"
        >
          {order_item.title}
        </a>

        <span className="header-cart-item-info">
          {storage[index].Quantity} x {order_item.Price}$
        </span>
      </div>
    </li>
  );
})

i am using reactjs on the frontend and express on the backend

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

You can use Javascript's arithmetic operators

You can do this -

{storage[index].Quantity*order_item.Price}$
about 4 years ago · Juan Pablo Isaza Relatório

0

This must work.

  1. Create a cart list component to map cart at the same time do calculations.
  2. Call your component with props (storage and cart)
// map cart content
const CartContent = ({ cart, storage }) => {
  
  // You can use simple variable instead of state init
  // to bypass : too many re-renders.

  let cartTotal= 0

  const cartList = cart.map((item, index) => {
    cartTotal+=item.price*storage[index].Quantity

      return (
          <div>
              <h2>
                  {item.title}
              </h2>
              <div>price: {item.price*storage[index].Quantity}
              </div>
          </div>
      );
  });

  // render
  return (
    <>
      {cartList}
      <br/>
      <p>Total {cartTotal}</p>
    </>
  )
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda