operator not return expected result

The Average & Median Calculator takes three input values and returns the Average and Median to the user. The Median is returning the expected result so I’ve not included that below. The issue is the Average is way off.

I’ve console.log the numbers to ensure they were not being manipulated before performing the calculations and they’re not. I’ve console.log the numbers that will be entered in the input in console.log to get a side by side comparison e.g.

console.log((34 + 30 + 11)/ 3) //return 25

and the above returns correctly but the values entered into the input field return 114337.

 console.log((inputValue.val1 + inputValue.val2 + inputValue.val3) / 3) //return 114337 which is wrong

I’ve looked through my code several times and didn’t see anything so I decided to post here to get an extra set of eyes in hopes of finding a solution.

 const [min] = useState(0);
 const [CalcAvg, setCalcAvg] = useState(0);

 const [inputValue, setInputValue] = useState({
   val1: 0,
   val2: 0,
   val3: 0,
 });

 const handleChange = event => {
   const {name, value} = event.target;
   setInputValue(prev => {
     return {
       ...prev,
       [name]: value
     }
   })

 }

 const average = () => {
   // console.log("val1 " + inputValue.val1)
   // console.log("val2 " + inputValue.val2);
   // console.log("val3 " + inputValue.val3);

   /*** THE ISSUE IS HERE ****/

   console.log((inputValue.val1 + inputValue.val2 + inputValue.val3) / 3);

   //  setCalcAvg(avg);
 }


 const handleSubmit = event => {
   event.preventDefault()
   average()
   median()
   /*** THIS RETURNS THE CORRECT VALUE ****/
       console.log((34 + 30 + 11) / 3);

 }

 return (
   <main>
     <div>
       <form onSubmit={handleSubmit} className="form">
         <input
           name="val1"
           value={inputValue.val1}
           type="number"
           min={min}
           onChange={handleChange}
           required
         />
         <input
           name="val2"
           value={inputValue.val2}
           type="number"
           min={min}
           onChange={handleChange}
           required
         />
         <input
           name="val3"
           value={inputValue.val3}
           type="number"
           min={min}
           onChange={handleChange}
           required
         />
         <button onSubmit={handleSubmit} type="submit">
           Calculate
         </button>
       </form>
       <Results average={CalcAvg} />
     </div>
   </main>
 );```

>Solution :

It is treating your values as strings instead of integers. So it’s getting the correct response because it’s dividing 343011 by 3. If you use parseInt(inputValue.val1, 10) to coerce those strings into integers, you will get the expected result of 25. Since you didn’t post your median function, I can’t tell you why that is working and this isn’t.

You can also apply parseInt in your handleChange function by using

[name]: parseInt(value, 10)

console.log(('34'+'30'+'11')/3)
console.log((parseInt('34', 10) + parseInt('30', 10) + parseInt('11', 10))/3)