How can I add prices for objects

Question

I have an array of objects. Model, engine, gearbox. Each facility has its name and price.

const ModelsTypes = [
        {
            name: "pro rs3",
            price: 100000,
        },
        {
            name: "uber rs2",
            price: 50000,
        },
        {
            name: "standard",
            price: 10000,
        },
        {
            name: "wk",
            price: 5000,
        },
    ]

const EngineTypes = [
        {
            name: "5.2l 532bhp",
            price: 10000,
        },
        {
            name: "4.2l 443bhp",
            price: 9000,
        },
        {
            name: "3.6 374bhp",
            price: 5000,
        },
        {
            name: "2.0 166bhp",
            price: 1000,
        },
    ]

const Gearbox = [
        {
            gearbox: "Manual",
            price: 5000,
        },
        {
            gearbox: "Automatic",
            price: 10000,
        },
    ]

The user can choose any configuration. Then all selected options are displayed in the summary. How can I add prices for each property selected by the user. Do I need another useState to sum up the price?

This is the part of the code that returns all the objects in the array.

{ModelsTypes.map(model =>
     <div>
      <label>{model.name}</label>
      <input onClick={addCarModel} type="radio" name="Model" value={model.name} />
     </div>
)}

{EngineTypes.map(engine =>
     <div>
      <label>{engine.name}</label>
      <input onClick={addCarEngine} type="radio" name="Model" value={engine.name} />
     </div>
)}

{Gearbox.map(gearbox =>
     <div>
      <label>{gearbox.gearbox}</label>
      <input onClick={addCarGearbox} type="radio" name="Model" value={gearbox.gearbox} />
     </div>
)}

Functions that components use

const addCarModel = (e) => {
 setCarModel(carModel => e.target.value);
}

const addCarEngine = (e) => {
 setCarEngine(carEngine => e.target.value);
}

const addCarGearbox = (e) => {
 setCarGearbox(carGearbox => e.target.value);
}

Summary

<div className={styles.summaryinfo}>
 <ul>
  <li>Model: <span>{carModel}</span></li>
  <li>Engine: <span>{carEngine}</span></li>
  <li>Gearbox: <span>{carGearbox}</span></li>
  <li>Price: <span>${totalPrice}</span></li>
 </ul>
</div>

Answer 1

If you store all the actual objects that are selected in state, you can easily just use the price inside a useEffect

useEffect( () => {
  setTotalPrice( (carModel.price + carEngine.price + carGearbox.price) || 0);
},[carModel,carEngine,carGearbox])

const addCarModel = (e) => {
 setCarModel(carModel => ModelsTypes.find(x => x.name == e.target.value));
}

const addCarEngine = (e) => {
 setCarEngine(carEngine => EngineTypes.find(x => x.name == e.target.value));
}

const addCarGearbox = (e) => {
 setCarGearbox(carGearbox => Gearbox.find(x => x.gearbox == e.target.value));
}

Live example:

 const ModelsTypes=[{name:"pro rs3",price:1e5},{name:"uber rs2",price:5e4},{name:"standard",price:1e4},{name:"wk",price:5e3}],EngineTypes=[{name:"5.2l 532bhp",price:1e4},{name:"4.2l 443bhp",price:9e3},{name:"3.6 374bhp",price:5e3},{name:"2.0 166bhp",price:1e3}],Gearbox=[{gearbox:"Manual",price:5e3},{gearbox:"Automatic",price:1e4}]; const App = () => { const [carModel,setCarModel] = useState(""); const [carEngine,setCarEngine] = useState(""); const [carGearbox,setCarGearbox] = useState(""); const [totalPrice,setTotalPrice] = useState(0); useEffect( () => { setTotalPrice( (carModel.price + carEngine.price + carGearbox.price) || 0); },[carModel,carEngine,carGearbox]) const addCarModel = (e) => { setCarModel(carModel => ModelsTypes.find(x => x.name == e.target.value)); } const addCarEngine = (e) => { setCarEngine(carEngine => EngineTypes.find(x => x.name == e.target.value)); } const addCarGearbox = (e) => { setCarGearbox(carGearbox => Gearbox.find(x => x.gearbox == e.target.value)); } return ( <div> {ModelsTypes.map(model => <div> <label>{model.name}</label> <input onClick={addCarModel} type="radio" name="Model" value={model.name} /> </div> )} {EngineTypes.map(engine => <div> <label>{engine.name}</label> <input onClick={addCarEngine} type="radio" name="Engine" value={engine.name} /> </div> )} {Gearbox.map(gearbox => <div> <label>{gearbox.gearbox}</label> <input onClick={addCarGearbox} type="radio" name="Gearbox" value={gearbox.gearbox} /> </div> )} <div> <ul> <li>Model: <span>{carModel.name}</span></li> <li>Engine: <span>{carEngine.name}</span></li> <li>Gearbox: <span>{carGearbox.gearbox}</span></li> <li>Price: <span>${totalPrice}</span></li> </ul> </div> </div> ) } ReactDOM.render(<App />, document.getElementById("root"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script> <script> var { useReducer, useEffect, useState, useRef, useCallback } = React </script> <div id="root"></div>

Answer 2

You can use array.reduce on the selected parts to get the total price:

[carModel, carEngine, carGearbox].reduce((total, item)=>total + item.price,0)

Alternatively you could use another state variable and sum it up anytime an item is selected inside a useEffect :

const [total, setTotal] = setState(0);
useEffect(()=>{
  setTotal(carModel.price + carEngine.price + carGearbox.price)
},[carModel, carEngine, carGearbox])