I'm struggling with integrating react-hook-form. I have custom range input component, that I use with RHF by exposing the input with forwardRef.
I need to access the current value of the input for two things:
1. Display the initial value of the input.
2. Update the displayed value.
Both props.value and props.defaultValue are undefined. I tried to create a ref inside of the RangeInput, and useImperativeHandle for exposing it, but then the RHF wan't working.
Apparently forwarded ref is a function, so ref.current doesn't exist either.
Here's a link to the sandbox: https://codesandbox.io/p/sandbox/rhf-forwardref-p6puwp?file=%2Fsrc%2Ffeatures%2FSettings%2FRangeInput.tsx%3A1%2C1
Thanks in advance for any help
So to reiterate: what I want to achieve is to have the value (both default and current) that RHF supplies to be accessible within the component.
I don't know how to achieve it as both value and defaultValue are undefined and forwarded ref is a function.
Thank you for the time spent on this! Version with the Controller is the way to go. After all my component is a controlled input, and that's what the Controller exists for in RHF.
I wanted to have the value displayed and updated, thus internally I was "intercepting" onChange event and setting the value in local state manually. But controller exposes missing value, which I needed so that solves my problem
Thanks once more!
Have a nice Sunday Zeno! I'm marking the thread as solved.