Have to press twice for deleting the last character of input and twice for enter the first character

[vanminhquangtri]

Hello everyone. I use React Hook Form to validate my form including many input. Everything is five except one problem that I have to press backspace twice for deleting the last character and twice for enter the first character. For example. If i need to show value of input is 'jonh', then I have to press 'j' twice so that this letter can be shown. And when I delete 'john', a press 1 backspace for 'n', 1 backspace for 'h', 1 backspace for 'o' BUT 2 backspace for 'j'. I thought this is from react hook form because I don't use, it's no problem. Appreciate any help. Thank you so much

my source:
import React, { useState } from 'react'
import { useForm } from 'react-hook-form'

const [product, setProduct] = useState({
name: '',
code: '',
description: '',
price: '',
weight: '',
long: '',
width: '',
high: '',
})

const handleOnChange = function (event) {
setProduct((prevState) => {
return { ...prevState, [event.target.name]: event.target.value }
})
}

{errors.name && (

{errors.name.message}

)}

[bluebill1049]

codesandbox

[vanminhquangtri]

Yes you can see it here:
https://codesandbox.io/s/react-hook-form-j63o9?file=/src/App.js

[vanminhquangtri]

Codesanbox view:
https://codesandbox.io/s/react-hook-form-j63o9?file=/src/App.js

[bluebill1049]

read the doc on: https://react-hook-form.com/get-started#Quickstart in hook form, you don't need to attach onChagne for native input, we are doing that for you.

[vanminhquangtri]

Thank you so much. Could you please specific the function/api name that you are mentioning, because I can't find any thing call onChange or HandleOnChange etc.

[bluebill1049]

you just don't need it.

<input ref={regsiter} name="xxx" /> that's it

[vanminhquangtri]

this is only update the value of the form itself, my purspose is when typing the input, I want to update value of form to state of component.