I have a live side project that I've been building on for about six months. One page that you can see here allows the user to select two options where they can then select a number and it will display a second number that is calculated, and then rounded to the nearest whole number. The React component that has the logic for this is as follows:
import React, {useEffect, useState} from 'react'
export default function RatingDifference({label_one, label_two, standard_deviation, currentLinearRegression}) {
const [currentNumber, SetCurrentNumber] = useState(1500)
useEffect(()=>{console.log(standard_deviation)},[standard_deviation])
const handleChange = (e) => {
SetCurrentNumber(e.target.value)
}
return (
<div className='fade-in difference'>
<hr />
<p>
<span className='break'>A rating of {' '}</span>
<span className='break bold-text'><input id='find-my-rating' type='number' onChange={handleChange} defaultValue={currentNumber}/>{' '}</span>
<span className='break'>in {label_one} would equal{' '} </span>
<span className='break bold-text'>{Math.round((currentLinearRegression.m*currentNumber)+currentLinearRegression.b)}{' '}</span>
<span className='break'>in {label_two}, with an average variation of</span>
<span className='break bold-text'> plus/minus of{' '+ Math.round(standard_deviation)+' '} points.</span>
</p>
</div>
)
}
Unfortunately, I frequently get users who complain that the the calculated number will display as the unrounded number, without a decimal. For example, the calculated number could be 1850.59 and then should be rounded to 1851 before rendering, but the component will instead display 18059. I have struggled to replicate this issue on my own, as when users see this, the issue goes away once they refresh the page. Would anyone be able to help me understand why this happens, and how to fix this issue?