✅ – ✅ – 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 helpRHF - ForwardRef
CodeSandbox is an online editor tailored for web applications.
6 Replies
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.![](https://cdn.answeroverflow.com/1109614827850190888/image.png)
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
Unknown User•16mo ago
Message Not Public
Sign In & Join Server To View
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.This question has an answer! Thank you for helping 😄
If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1109613302801256468
This question has an answer! Thank you for helping 😄
If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1109613302801256468
This thread hasn’t had any activity in 36 hours, so it’s now locked.
Threads are closed automatically after 36 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1109613302801256468