✅ – ✅ – Kuba – 22-47 May 20

Hello! 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
RHF - ForwardRef
CodeSandbox is an online editor tailored for web applications.
K
Kuba334d ago
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.
K
Kuba334d ago
It's updated (and shown for the first time) when it's modified because there's an event handler, but the value is initially missing, and it's not up to date after reset
UU
Unknown User333d ago
K
Kuba333d ago
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.
UU
Unknown User332d ago