Kuba•15mo ago

✅ – ✅ – 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.

6 Replies

Kuba•15mo 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.

Kuba•15mo 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

Unknown User•15mo ago

Message Not Public

Kuba•15mo 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.

reactibot•15mo ago

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