react setting NaN state after pressing Enter but logging getting correct value

Asked Dec 05 '22 at 06:33

Active Dec 05 '22 at 06:45

Viewed 27 times

Basically I have input element like

<input
    autoFocus
    value={newPrice}
    onChange={onPriceChange}
    type='number'
    onKeyDown={handleKeyPress}
    onBlur={onFocusChange}
    ref={inputRef}
/>

and I want to setPrice by entering number after onBlur or pressing enter. On blur function work fine but as soon I press enter price set to NaN

//My OnBlur handler
function onFocusChange() {
    const price = Number(inputRef.current?.value)
    setNewPrice(price)
    changePrice(id, price)
    setEdit(false)
  }

// Keydow handler
function handleKeyPress(e: KeyboardEvent<HTMLInputElement>) {
    if (e.key === 'Enter') {
        @ts-ignore
        setNewPrice(Number(e.target.value))
        setEdit(false)
    }
}

even if i use ref or event to access value during pressing enter it log perfectly fine value but as soon as state update i change to NaN. I also tried form which is take action as soon as i press enter. I handle onSumbit but problem is same NaN

need help what am i doing wrong

tried form and keydown both getting NaN. Update newPrice after pressing enter.

edited Dec 05 '22 at 06:45

asked Dec 05 '22 at 06:33

Milind Jamnekar

remove `!` here ` setPrice(Number(e.target.value))` – Sachila Ranawaka Dec 05 '22 at 06:35
`Number(true)` or `Number(false)` doesn't make much sense – CertainPerformance Dec 05 '22 at 06:36
@SachilaRanawaka Same result – Milind Jamnekar Dec 05 '22 at 06:37
@CertainPerformance I have updated the code but same result NaN. – Milind Jamnekar Dec 05 '22 at 06:43
can you reproduce in codesandbox and share the link – Sonu Sindhu Dec 05 '22 at 06:54
Have you tried debugging? If the state gets set to NaN, what is the target's value, and what were you expecting it to be instead? – CertainPerformance Dec 05 '22 at 06:59
@CertainPerformance and also sonu sindhu Thank for stopping by for helping me. I somehow resolved the problem. Error was coming because of focuschange, by pressing enter focuschange also triggered and somehow instead of state changing by key handler it handle by both handler and produces NaN. By removing focus handler I got the updated price nicely. Learned lesson as well. Don't over complicate any functionality. keep it simple that's the way to go. – Milind Jamnekar Dec 08 '22 at 16:40

react setting NaN state after pressing Enter but logging getting correct value

0 Answers0