I've got two hints for you, add them if you like. :)
This callback is actually just a function call.
// Convert Number to percentage
function getPercent(value) {
return Math.round(((value - min) / (props.max - min)) * 100);
}
You don't need refs for the inputs, if you set the value directly onChange.
onChange={(e) => {
const value = Math.min(Number(e.target.value), maxVal);
e.target.value = value;
setMinVal(value);
}
I did try using getPercent as a simple function initially, but ended up getting the below ESLint warning.
The 'getPercent' function makes the dependencies of useEffect Hook change on every render. To fix this, wrap the definition of 'getPercent' in its own useCallback() Hook.
You are right about not using refs in the onChange events. I've made the changes above. Thank you for pointing that out.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I've got two hints for you, add them if you like. :)
This callback is actually just a function call.
// Convert Number to percentage
function getPercent(value) {
return Math.round(((value - min) / (props.max - min)) * 100);
}
You don't need refs for the inputs, if you set the value directly onChange.
onChange={(e) => {
const value = Math.min(Number(e.target.value), maxVal);
e.target.value = value;
setMinVal(value);
}
I did try using
getPercentas a simple function initially, but ended up getting the below ESLint warning.You are right about not using refs in the
onChangeevents. I've made the changes above. Thank you for pointing that out.