Can you conditionally render multiple forms within one Formik component

[tonyfatouros]

Hi,

I am new to React and to Formik forms. At the moment I have my main/parent Formik form with initialValues of say five different fields, with one of those fields being a select list that determines which other forms to conditionally render as part of my main form.

My question is, based on my select-list value, which I have stored within state, is it possible to have multiple forms within the one Formik component as below and only render Form 2 below based on a select-list value in state?

If what I am asking here is not possible, could people please suggest another means of trying to achieve what I am after, keeping in mind that I will always need to have my main parent Formik form.

import React from "react"

import { render } from "react-dom"

import { Formik, Form, Field } from "formik"



<Formik

initialValues={{ name: "", surname: "", age: 0 }}

onSubmit={values => console.log(values)}

>

// Form 1

<Form>

<p>Name</p>

<Field name="name" />

<button type="button" onClick={() => console.log(props.values.name)} >

Submit

</button>

</Form>

// Form 2

<Form>

<p>Name</p>

<Field name="name" />

<p>Surname</p>

<Field name="surname" />

<p>Age</p>

<Field name="age" type="number" />

<button type="submit">Submit</button>

</Form>

</Formik>