javascript - How to total selected items in react

Question

I am working on a pizzawebsite in react. I am getting a problem in toppings that I want to get the total of all selected items but my toppings is a components and I am using as a props to reuse the component again and again but I want to tick the checkbox and then get the total of it

File: ToppingsName.jsx

import tick from "../img/tick.png";

export default function ToppingsName(props) {
  
  const [showTick, setShowTick] = useState(false);
  const onClick = () => {
    showTick ? setShowTick(false) : setShowTick(true);
  };

  return (
    <div className="toppings-ntp">
      <div className="toppings-name">{props.name}</div>
      <div className="toppings-tick" onClick={onClick}>
        {showTick ? <img src={tick} className="t-name-tick" alt="+" /> : null}
      </div>
      <div
        className={`toppings-prize ${
          showTick ? "toppings-prize-red" : "toppings-prize-grey"
        }`}
      >
        Rs {props.prize}
      </div>
    </div>
  );
}

File: MainProduct.jsx

import Navbar from "../HomePage/HomeNavbar";
import "./style.css"
import Pepperoni from "../img/pizzas/pepperoni-1.jpg";
import Toppings from "./ToppingsName";


export default function MainProduct() {

  const [quantity, setQuantity] = useState(1);
  const quantityIncrease = () => {setQuantity(quantity + 1);}
  const quantityDecrease = () => {setQuantity(quantity - 1);}

  var pizzaPrize = (185.0 * quantity);
  const [toppings, setToppings] = useState({
    mushroom: {
      prize: 10,
      tick: true
    },
    onions: 7,
    blackOlives: 9.5,
    bacon: 12
  })

  var totalPizzaPrize = pizzaPrize;
  
  return (
    <>
      <Navbar image={Pepperoni} />
      <div className="container">
        <div className="product-heading">Pepperoni</div>
        {/* <label className="quantity-label">Quantity</label> */}
        <div className="count-cart">
          <div className="pizza-count">
            <div className="pc-minus" onClick={quantityDecrease}>
              -
            </div>
            <div className="pc-count">{quantity}</div>
            <div className="pc-plus" onClick={quantityIncrease}>
              +
            </div>
          </div>
          <div className="add-to-cart">Add to Cart</div>
          <div className="pizza-prize">
            Rs {pizzaPrize.toFixed(2)}
          </div>
        </div>
        <div className="pizza-toppings">
          {/* <label className="toppings-label">Toppings</label> */}
          <Toppings name={`Mushroom`} prize={(toppings.mushroom.prize).toFixed(2)} />
          <Toppings name={`Onions`} prize={(toppings.onions).toFixed(2)} />
          <Toppings name={`Black olives`} prize={(toppings.blackOlives).toFixed(2)} />
          <Toppings name={`Bacon`} prize={(toppings.bacon).toFixed(2)} />
        </div>
        <div className="total-pizza-prize">Total : Rs {(totalPizzaPrize).toFixed(2)}</div>
      </div>
    </>
  );
}

Please help me so I can complete my project. Thanks for the help

question from:https://stackoverflow.com/questions/65850077/how-to-total-selected-items-in-react

Answer 1

If I understood correctly I hope this can help you:

MailProduct.tsx

    import React,{useState} from 'react'
    import Toppings from "./ToppingsName";
    
    
    export default function MainProduct() {
    
      const [quantity, setQuantity] = useState(1);
      const quantityIncrease = () => {setQuantity(quantity + 1);}
      const quantityDecrease = () => {setQuantity(quantity - 1);}
      const [includedInList, setIncludedInList] = useState([])
    
      var pizzaPrize = (185.0 * quantity);
      const [toppings, setToppings] = useState({
        mushroom: {
          prize: 10,
          tick: true
        },
        onions: 7,
        blackOlives: 9.5,
        bacon: 12
      })
    
      var totalPizzaPrize = pizzaPrize;
      
      console.log('list',includedInList)
    
      return (
        <>
          <div className="container">
            <div className="product-heading">Pepperoni</div>
            {/* <label className="quantity-label">Quantity</label> */}
            <div className="count-cart">
              <div className="pizza-count">
                <div className="pc-minus" onClick={quantityDecrease}>
                  -
                </div>
                <div className="pc-count">{quantity}</div>
                <div className="pc-plus" onClick={quantityIncrease}>
                  +
                </div>
              </div>
              <div className="add-to-cart">Add to Cart</div>
              <div className="pizza-prize">
                Rs {pizzaPrize.toFixed(2)}
              </div>
            </div>
            <div className="pizza-toppings">
              {/* <label className="toppings-label">Toppings</label> */}
              <Toppings name={`Mushroom`} includedInList={includedInList} setIncludedInList={setIncludedInList} prize={(toppings.mushroom.prize).toFixed(2)} />
              <Toppings name={`Onions`}  includedInList={includedInList} setIncludedInList={setIncludedInList} prize={(toppings.onions).toFixed(2)} />
              <Toppings name={`Black olives`}  includedInList={includedInList} setIncludedInList={setIncludedInList} prize={(toppings.blackOlives).toFixed(2)} />
              <Toppings name={`Bacon`} includedInList={includedInList} setIncludedInList={setIncludedInList}  prize={(toppings.bacon).toFixed(2)} />
            </div>
            <div className="total-pizza-prize">Total : Rs {(totalPizzaPrize).toFixed(2)}</div>
          </div>
        </>
      );
    }

Topplings Name:

import React,{useState} from 'react'
import Toppings from "./ToppingsName";


export default function MainProduct() {

  const [quantity, setQuantity] = useState(1);
  const quantityIncrease = () => {setQuantity(quantity + 1);}
  const quantityDecrease = () => {setQuantity(quantity - 1);}
  const [includedInList, setIncludedInList] = useState([])

  var pizzaPrize = (185.0 * quantity);
  const [toppings, setToppings] = useState({
    mushroom: {
      prize: 10,
      tick: true
    },
    onions: 7,
    blackOlives: 9.5,
    bacon: 12
  })

  var totalPizzaPrize = pizzaPrize;
  

  return (
    <>
      <div className="container">
        <div className="product-heading">Pepperoni</div>
        {/* <label className="quantity-label">Quantity</label> */}
        <div className="count-cart">
          <div className="pizza-count">
            <div className="pc-minus" onClick={quantityDecrease}>
              -
            </div>
            <div className="pc-count">{quantity}</div>
            <div className="pc-plus" onClick={quantityIncrease}>
              +
            </div>
          </div>
          <div className="add-to-cart">Add to Cart</div>
          <div className="pizza-prize">
            Rs {pizzaPrize.toFixed(2)}
          </div>
        </div>
        <div className="pizza-toppings">
          {/* <label className="toppings-label">Toppings</label> */}
          <Toppings name={`Mushroom`} includedInList={includedInList} setIncludedInList={setIncludedInList} prize={(toppings.mushroom.prize).toFixed(2)} />
          <Toppings name={`Onions`}  includedInList={includedInList} setIncludedInList={setIncludedInList} prize={(toppings.onions).toFixed(2)} />
          <Toppings name={`Black olives`}  includedInList={includedInList} setIncludedInList={setIncludedInList} prize={(toppings.blackOlives).toFixed(2)} />
          <Toppings name={`Bacon`} includedInList={includedInList} setIncludedInList={setIncludedInList}  prize={(toppings.bacon).toFixed(2)} />
        </div>
        <div className="total-pizza-prize">Total : Rs {(totalPizzaPrize).toFixed(2)}</div>
        <p>{JSON.stringify(includedInList)}</p>
      </div>
    </>
  );
}

It's not a completed solution but you can do the maths on includedInList to calculate the final price.