Calculations from radio button inputs in React Hooks-CodePudding

My expectation is calcualate total price according to user inputted values. Total price is depend on "ToopingPrice" , "Size" and "Qty". In My code, total price is not calculating. Consider that I am still beginner level in React.

  const [quantity, setQuentity] = useState(1)
  const [size, setSize] = useState('medium')
  const [sizePrice, setSizePrice] = useState(product.mediumPrice)
  const [topping, setTopping] = useState('none')
  const [toppingPrice, setToppingPrice] = useState(0)
  const [totPrice, setTotPrice] = useState(product.mediumPrice)

Total price calculating function

    const calcTotPrice = () => {
    alert.success(product.smallPrice);
    const FtotPrice = (sizePrice   toppingPrice)*quantity
    setTotPrice(FtotPrice)
    alert.success("calcTotal working");
  }

This is my radio buttons. I am not sure is it correct way to put onClick method like below.

  <div className="selectButton">
   <div className="radio-container">
      <input id="500g" name="size" type="radio" defaultValue="500g"  onClick={size => setSize('small')} onClick={sizePrice => setSizePrice(product.smallPrice)} onClick={calcTotPrice}/>
      <label htmlFor="500g">500 g</label>
      <input defaultChecked id="1Kg" name="size" type="radio" defaultValue="1Kg"  onClick={size => setSize('medium')} onClick={sizePrice => setSizePrice(product.mediumPrice)} onClick={calcTotPrice}/>
      <label htmlFor="1Kg">1 Kg</label>
      <input id="2Kg" name="size" type="radio" defaultValue="2Kg"  onClick={size => setSize('large')} onClick={sizePrice => setSizePrice(product.largelPrice)} onClick={calcTotPrice}/>
      <label htmlFor="2Kg">2 Kg</label>
   </div>
</div>
<div className="selectButton">
   <div className="radio-container2">
      <input defaultChecked id="0" name="topping" type="radio" defaultValue="0"  onClick={topping => setTopping('None')} onClick={toppingPrice => setToppingPrice(0)} onClick={calcTotPrice}/>
      <label htmlFor="0">None</label><br />
      <input id="1" name="topping" type="radio" defaultValue="1"  onClick={topping => setTopping('Fresh Fruit')} onClick={toppingPrice => setToppingPrice(product.freshFruitToppingPrice)} onClick={calcTotPrice}/>
      <label htmlFor="1">Fresh Fruit</label><br />
      <input id="2" name="topping" type="radio" defaultValue="2"  onClick={topping => setTopping('Candies & Cashew Nut')}onClick={toppingPrice => setToppingPrice(product.chocolateCandiesAndCashewNutToppingPrice)} onClick={calcTotPrice} />
      <label htmlFor="2">Candies & Cashew Nut</label><br />
      <input id="3" name="topping" type="radio" defaultValue="3"  onClick={topping => setTopping('Moldable Fondan')} onClick={toppingPrice => setToppingPrice(product.moldableFondanToppingPrice)} onClick={calcTotPrice}/>
      <label htmlFor="3">Moldable Fondan</label>
   </div>
</div>

Any help are much appreciated.

CodePudding user response：

Are you getting NaN? because it seems to me that your problem is providing the wrong type of data for the calculation. are sizePrice, toppingPrice, and quantity numbers?

I think your quantity might be a string or something.

Also, why are you having this many onClicks on a single input? :D

CodePudding user response：

Your ‘calcTotPrice’ handler should be an effect hook. Try

useEffect( () => {
     alert.success(product.smallPrice);
    const FtotPrice = (sizePrice   toppingPrice)*quantity
    setTotPrice(FtotPrice)
    alert.success("calcTotal working");
},[product, sizePrice, quantity, setTotPrice]);

CodePudding user response：

I would suggest to move onClick logic into 1 separate function, and call it with different params.

First input will look like this:

<input id="1" name="topping" type="radio" defaultValue="1"  onClick={() => recalculate("Fresh Fruit", product.freshFruitToppingPrice)}/>

And the function will look like that:

const recalculate = (toppingName, toppingPrice) => {
    setTopping(toppingName);
    setToppingPrice(toppingPrice);
    calcTotPrice();
}

Thats the first step, then simply we can debug this code.