Formik v2: How to conditionally render fields based on another field's value without losing form state?
I've been working on this all day and I'm testing a new approach and I'm using Formik v2 for handling forms in my React application, and I'm working with an scenario where I need to conditionally render fields based on the value of another field..... For instance, I have a dropdown for selecting a user type, and based on the type selected, I want to show additional fields for either 'Admin' or 'User'. The question is, when I switch between these options, the previously entered data in the fields gets lost, which is not the intended behavior. Here's a simplified version of my code: ```javascript import React from 'react'; import { Formik, Form, Field } from 'formik'; const MyForm = () => { return ( <Formik initialValues={{ userType: '', adminField: '', userField: '' }} onSubmit={(values) => { console.log(values); }} > {({ values }) => ( <Form> <Field as="select" name="userType"> <option value="">Select User Type</option> <option value="admin">Admin</option> <option value="user">User</option> </Field> {values.userType === 'admin' && ( <Field name="adminField" placeholder="Admin Specific Field" /> )} {values.userType === 'user' && ( <Field name="userField" placeholder="User Specific Field" /> )} <button type="submit">Submit</button> </Form> )} </Formik> ); }; export default MyForm; ``` This code works for displaying the conditional fields, but when I change the selection from 'Admin' to 'User', the value in the 'adminField' gets cleared, and vice versa. I want to retain the values of these fields even when switching between them. I've tried using `setFieldTouched` and `setFieldValue`, but it seems I might be misunderstanding how Formik handles state for conditionally rendered fields. Any guidance on how to achieve this while keeping the form state intact would be greatly appreciated! Is this even possible? I'm coming from a different tech stack and learning Javascript. I'd really appreciate any guidance on this.