title: dynamic age field based on number of children selected
body: <p>I am trying to create a form field to get the number of adults and children. Based on the number of children, I need to show a select field to know the age of those children. I could create a field for adding and removing number of adults and children and could show the field for age based on the total number of children but could not save their age.</p>
  
  <p>Here is how i have done</p>
  
  <pre><code>const Form = () =&gt; {
    return (
      &lt;&gt;
        &lt;Formik
          initialValues={{
            traveller: {
              adult: 1,
              children: 0,
              childAge: []
            }
          }}
        &gt;
          {({ handleSubmit, values }) =&gt; {
            return (
              &lt;&gt;
                &lt;form onSubmit={handleSubmit}&gt;
                  {JSON.stringify(values, null, 2)}
                  &lt;TravellerField values={values} /&gt;
                &lt;/form&gt;
              &lt;/&gt;
            );
          }}
        &lt;/Formik&gt;
      &lt;/&gt;
    );
  };
  
  export default Form;
  
  const Index = ({ values }) =&gt; {
    return (
      &lt;&gt;
        &lt;Dropdown&gt;
          &lt;Dropdown.Header style={{ width: 400 }}&gt;
            {() =&gt; {
              return (
                &lt;div&gt;
                  &lt;Button type="button"&gt;
                    {values.traveller.adult} adult
                    {values.traveller.children} children
                  &lt;/Button&gt;
                &lt;/div&gt;
              );
            }}
          &lt;/Dropdown.Header&gt;
          &lt;Dropdown.Menu
            menuStyle={{
              top: "40px",
              width: 400,
              left: 0,
              right: 0
            }}
          &gt;
            &lt;Dropdown.Item&gt;
              &lt;Wrapper&gt;
                &lt;Inline&gt;
                  &lt;Text&gt;Adult&lt;/Text&gt;
                  &lt;Field name="traveller.adult" component={QuantityField} /&gt;
                &lt;/Inline&gt;
                &lt;Inline&gt;
                  &lt;Text&gt;Children&lt;/Text&gt;
                  &lt;Field name="traveller.children" component={QuantityField} /&gt;
                &lt;/Inline&gt;
                {values.traveller.children &gt; 0 &amp;&amp;
                  Array.from({ length: values.traveller.children }, (_, i) =&gt; {
                    return (
                      &lt;React.Fragment key={i}&gt;
                        &lt;Field name="traveller.childAge" component="select"&gt;
                          &lt;option /&gt;
                          &lt;option value="5"&gt;5&lt;/option&gt;
                          &lt;option value="6"&gt;6&lt;/option&gt;
                          &lt;option value="7"&gt;7&lt;/option&gt;
                        &lt;/Field&gt;
                      &lt;/React.Fragment&gt;
                    );
                  })}
              &lt;/Wrapper&gt;
            &lt;/Dropdown.Item&gt;
          &lt;/Dropdown.Menu&gt;
        &lt;/Dropdown&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>To be more clear on what I tried, I have created a sandbox and here is the link to it</p>
  
  <p><a href="https://codesandbox.io/s/green-moon-pehc1?file=/src/Form.js:115-655" rel="nofollow noreferrer">https://codesandbox.io/s/green-moon-pehc1?file=/src/Form.js:115-655</a></p>
  
  <p>This is what i exactly wanted <a href="https://www.expedia.com/?pwaLob=wizard-hotel-pwa-v2" rel="nofollow noreferrer">https://www.expedia.com/?pwaLob=wizard-hotel-pwa-v2</a> if you look at the traveller field of it. </p>