Why is the this input "value" property not refreshed? - reactjs

Question

I am learning React while doing a new project with it.
I want to create an input component with a event that is only triggered if the user exits the input or hit enter. (here is the link to codesandbox)
const MyInput = ({ value, onValueChange }) => {
const [myCurrentTypingValue, setMyCurrentTypingValue] = useState(value);
useEffect(() => setMyCurrentTypingValue(value), [value]);
const commitChanges = () => {
const numericValue = Number(myCurrentTypingValue);
setMyCurrentTypingValue(numericValue);
if (value !== numericValue) onValueChange(numericValue);
};
const handleOnChange = (e) => setMyCurrentTypingValue(e.target.value);
const handleOnBlur = () => commitChanges();
const handleOnKeyPress = (e) => {
if (e.charCode === 13) commitChanges();
};
return (
<input
type="number"
value={myCurrentTypingValue}
onChange={handleOnChange}
onBlur={handleOnBlur}
onKeyPress={handleOnKeyPress}
/>
);
};
As you can see, when I type something, the input is correctly displayed when I press enter or exit, but when I type a number that starts with 0 (e.g. 000023), although the numerical value is correctly converted, it is still displayed with all zeros in front of it.
Because I change the state of my component, I expect my input box value property to be refreshed, and it is not:
Why is this happening? I checked with the debugger tool, my state is correct?
How can I have the input box reflect the new state with the good numeric formatted value?

Answer 1

When it's time to "commit" your changes, you should stringify the parsed number value and update the input value (which is always a string). Here's a self-contained example:
TS Playground
body { font-family: sans-serif; }
input[type="number"], pre { font-size: 1rem; padding: 0.5rem; }
<div id="root"></div><script src="https://unpkg.com/react#18.1.0/umd/react.development.js"></script><script src="https://unpkg.com/react-dom#18.1.0/umd/react-dom.development.js"></script><script src="https://unpkg.com/#babel/standalone#7.17.10/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">
// import * as ReactDOM from 'react-dom/client';
// import {useEffect, useState} from 'react';
// This Stack Overflow snippet demo uses UMD modules instead of the above import statments
const {useEffect, useState} = React;
// Parse a string as a number, but if the string is not a valid number then return 0
function parseNumber (str) {
const n = Number(str);
return Number.isNaN(n) ? 0 : n;
}
function NumberInput ({value, setValue}) {
const [rawValue, setRawValue] = useState(String(value));
useEffect(() => setRawValue(String(value)), [value]);
const commit = () => setValue(parseNumber(rawValue));
const handleChange = (ev) => setRawValue(ev.target.value);
const handleKeyUp = (ev) => {
if (ev.key === 'Enter') commit();
};
return (
<input
type="number"
onBlur={commit}
onChange={handleChange}
onKeyUp={handleKeyUp}
value={rawValue}
/>
);
}
function App () {
const [value, setValue] = useState(0);
return (
<div>
<h1>Number input management</h1>
<NumberInput {...{value, setValue}} />
<pre><code>{JSON.stringify({value}, null, 2)}</code></pre>
</div>
);
}
const reactRoot = ReactDOM.createRoot(document.getElementById('root'));
reactRoot.render(<App />);
</script>