Hi I have a small React app that can increase by 1 when user click on a button. User can also type in the value they want in the input box. However, when I type in a value and then click the button, the value is treated a string not a number i.e. 4 -> 41 -> 411 instead of 5 and 6. This works fine if I click the button without type in the value i.e. 0->1. Does anyone know why this happens ? Thanks
export default function App() {
const [value, setValue] = React.useState(0);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div>
<input
value={value}
onChange={(event) => {
setValue(event.target.value); // -> still a number
console.log(typeof value);
}}
/>
<button
onClick={() => {
console.log(typeof value); // -> it is a string
setValue(value + 1);
}}
>
Click me
</button>
</div>
</div>
);
}
It's because the values inputs generate are strings. If you attempt to do "addition" with a string and a number, javascript will "assume" you want a string back and to treat both the number and the string as strings.
If you want to make sure your state stays a number type, just wrap your value like so setValue(Number(event.target.value)). Your button should be fine because it is the input that converts your state to string so if that is taken care of you don't need to do anything else.
Value of e.target.value will always be string and it does not depend on type of input. To achieve what you want you need to cast the string you are receiving from input to an integer. By using parseInt function provided by javascript
export default function App() {
const [value, setValue] =
React.useState(0);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div>
<input
value={value}
onChange={(event) => {
setValue(event.target.value); // -> still a number
console.log(typeof value);
}}
/>
<button
onClick={() => {
console.log(typeof value); // -> it is a string
setValue(parseInt(value) + 1); //-> line changed added parseInt
}}
>
Click me
</button>
</div>
</div>
);
}