'First Character is not displaying in input field useForms

When I click on Submit, it gives an error "required". But when i type text it doesn't take first character. On entering first character it only removes "required" message. Can you please tell me why it is not showing first character.

<div className="input-field">
    <label htmlFor="state">State</label>
       <input
       placeholder="State"
       name="state"
       autoComplete="off"
       type="text" 
       value={state}
       onChange = { e => setState(e.target.value)}
       ref={register({required:'required'})}  
       />
       <span className="error">{errors.state && errors.state.message}</span>
</div>
reactjsinputreduxreact-hooksreact-hook-form


Solution 1:[1]

It's probably related to the usage of react-hook-form with your custom controlled logic (value and onChange).

If you don't need the input to be controlled, I would recommend dropping the value and onChange props from the input, as they seem to be conflicting with the package.

Solution 2:[2]

Most likely, because setState is an asynchronous method. Try to add the async on your onChange function and await this.setState(). It should capture all the input characters.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 diogo.silva
Solution 2 Killbill

Related Questions