React Hook Form and conditional rendering causing reset issues - any solutions?
I've searched everywhere and can't find a clear answer. I'm working on a project and hit a roadblock. I've been banging my head against this for hours... I'm using React with React Hook Form (v7.0.0) and I've run into a question with resetting form fields when conditionally rendering components. I have a form where the visibility of certain fields depends on a checkbox. When I check the box to show a set of fields, they render correctly, but when I uncheck it, the form doesn't seem to reset those fields properly, leading to stale values being submitted. Here’s a simplified version of my code: ```jsx import React from 'react'; import { useForm } from 'react-hook-form'; const MyForm = () => { const { register, handleSubmit, reset, watch } = useForm(); const showExtraFields = watch('showExtra'); const onSubmit = data => { console.log(data); }; const handleCheckboxChange = (e) => { if (!e.target.checked) { reset({ showExtra: false }); // Attempting to reset } }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input type="checkbox" {...register('showExtra')} onChange={handleCheckboxChange} /> Show extra fields {showExtraFields && ( <div> <input type="text" {...register('extraField1')} placeholder="Extra Field 1" /> <input type="text" {...register('extraField2')} placeholder="Extra Field 2" /> </div> )} <input type="submit" /> </form> ); }; export default MyForm; ``` The question arises when I check the checkbox, fill out the extra fields, and then uncheck the checkbox. The `extraField1` and `extraField2` values continue in the form data even though they are not rendered anymore. When I submit the form after unchecking, I still see the values from those fields in the console output. I've tried calling `reset()` in the `handleCheckboxChange`, but it's still not working as I expect. I also attempted to set the default values for the fields to `undefined` or empty strings, but nothing seems to reset them correctly. Is there a better way to handle this kind of conditional rendering with form resets in React Hook Form? Any best practices or patterns I should follow? Thanks in advance for your help! I'm working on a web app that needs to handle this. Thanks in advance! My development environment is Linux. I'd really appreciate any guidance on this. I'm developing on Linux with Javascript. Hoping someone can shed some light on this. What's the best practice here?