Unable to get updated (last entered) input value inside watch function from react-hook-form library

49 Views Asked by At
import React, { useState } from 'react';
import { useForm } from "react-hook-form";
import './form.css';

function Form() {
    const{ register, handleSubmit, watch} = useForm();
    const [inputValue, setInputValue] = useState(0);

    watch(value => console.log(inputValue))

    const onSubmit = (data) => { 
    //    console.log(data);
    };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")}/>
        <input onChange={(event)=>setInputValue(event.target.value)}/>
        <button type='submit'>Submit</button>
    </form>
  )
}

export default Form;

There is a input (onChange event) when I am entering the value inside input and trying to update the other input with validation using register from useForm. The problem I am facing is inputValue value. I am getting value like 5, 50 in console if I enter 50 not the last updated value (50) from input.

0

There are 0 best solutions below