What are the effects of mutating event.target.value in React?

Tech QnA
1

We are building a custom input component.
Like, let’s say we wish to change the particular value from a string to a number. Here is the code snippet given below:
const CustomInputComponent = ({ onChange, …rest }) => {
const onChangeHandler = (event)=>{
// What are the consequences of doing this?
event.target.value = parseInt(event.target.value, 10);
onChange(event);
}
return
}
Just want to know what will be the consequences if we directly mutate the event.target.value like this?

2

Hey Roman,

There would be no consequences in terms of issues or errors in the code if you wanted to know that.

The only visible consequence of this would be user will only be able to enter integer in the input box and no characters, as you are parsing the user entered value as an Integer and setting it back in the input.

However, if the user input starts with a character then it would be set as “NaN”.

Hope this helps

Thanks

3

Got it! Thanks, Mudit for your response.