0

I am implementing input validation to disallow more than two decimals, but when I try and update a value, React is considering it to be the same so it won't update the state.

For example, the value is 1.00000, this will not work with my validation because JavaScript considers 1.0000 to be equal to 1, or 1.0 or 1.00, so when I call to update the state from 1.0000 to 1.00, nothing will happen. I don't blame React for this per se because it's probably doing JavaScript equality checks and seeing it's the same thing thus not updating the DOM.

Is there anyway I can force update the value from 1.000 to 1.00 via setting the state of a value using a functional component? Thanks

Validation not working, a user can add all these trailing 0s

enter image description here

Validation working properly, I can't enter another number (unless it's 0)

enter image description here

Shivam
  • 1,345
  • 7
  • 28
Anthony
  • 13,434
  • 14
  • 60
  • 80
  • Can you include your not-working validation code? – edemaine Jul 26 '21 at 17:44
  • You can just set the variable to `Math.floor(value * 100)/100` which will basically chop off any decimal points after 2. – sid c Jul 26 '21 at 17:49
  • 1
    Input values should come out as strings. `"1.0"` is definitely different from `"1.000"` unless you are converting the string to a number (but that's not on react). We'd need to see your code. – MinusFour Jul 26 '21 at 17:53
  • Does this answer your question? [Remove leading zeros from input type=number](https://stackoverflow.com/questions/30626094/remove-leading-zeros-from-input-type-number) – Shivam Jul 26 '21 at 22:17

2 Answers2

0

console.log(((-0.32 * 100) / 100).toFixed(2));
console.log(((1000.3202 * 100) / 100).toFixed(2));
console.log(((-1.294 * 100) / 100).toFixed(2));
console.log(((1.0 * 100) / 100).toFixed(2));
console.log(((1.000 * 100) / 100).toFixed(2));

Kind of a repeated post but faster to write out the answer than search.

BGPHiJACK
  • 1,277
  • 1
  • 8
  • 16
  • I don't think he is looking to round it, but to floor it. I think if the decimal is 1.327, he would want only the first two so it would be 1.32. I may be wrong though. – sid c Jul 26 '21 at 17:50
  • In all honesty it can be removed. That's if we want it to be very accurate! :P – BGPHiJACK Jul 26 '21 at 17:53
  • Yes I am already flooring it, and it's working, but the problem is that React won't update the dom from 1.0000 -> 1.00 because it sees it as the same number. – Anthony Jul 26 '21 at 18:37
  • I think the problem isn't with rounding but with React state. – Shivam Jul 26 '21 at 22:36
0

Set the step attribute on the input:

<input type="number" step={0.01} ... />`

You can also use an onChange event handler:

<input type="number" onChange={e => setValue(Number.parseFloat(e.target.value))} ... />`

If those don't work, try an empty useEffect block.

useEffect(() => {}, [value /* or whatever it is called */])

The 2nd way should remove the 0s because it converts it from a string.

The useEffect block should trigger a rerender in the component, but it depends on where the state was defined.

Shivam
  • 1,345
  • 7
  • 28
  • Yes I am using a custom onChange event handler, but the thing is that this actually won't update the value when you type additional 0s because like I laid out in the question, React sees it as the same value and doesn't update it in the DOM. – Anthony Jul 26 '21 at 18:36
  • I get that React is not updating it because `1.0 == 1.00` but I thought that it at least the step attribute would work. I'm updating my answer with a useEffect block. – Shivam Jul 26 '21 at 22:13