title: How can I create connected/dependent select elements in Formik?
body: <p>I have two select boxes, one for country and another for region. When someone selects a country, I need to populate the region select with different values (asynchronously). </p>
  
  <p>I'm aware of <a href="https://www.npmjs.com/package/react-country-region-selector" rel="noreferrer">react-country-region-selector</a> and <a href="https://react-select.com/home" rel="noreferrer">react-select</a>, but those solutions seem like overkill for such a simple task. </p>
  
  <p>In the code below, the regions are populated correctly after selecting a country, but the value of the country select is lost. Also, should I be setting state in the constructor or should Formik be handling all state? </p>
  
  <pre><code>import React from 'react';
  import { Formik, Form, Field } from "formik";
  
  class App extends React.Component {
    constructor(props) {
      super(props);
  
      console.log(`props: ${JSON.stringify(props, null, 2)}`)
  
      this.state = {
        regions: []
      }
  
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleCountryChanged = this.handleCountryChanged.bind(this);
      this.getRegions = this.getRegions.bind(this);
    }
  
    handleSubmit(values, { setSubmitting }) {
      console.log(JSON.stringify(values), null, 2);
    };
  
    handleCountryChanged(event) {
      const country = event.target.value;
      this.getRegions(country).then(regions =&gt; {
        this.setState({ regions: regions });
        console.log(`regions: ${JSON.stringify(regions, null, 2)}`);
      });
    }
  
    getRegions(country) {
      // Simulate async call
      return new Promise((resolve, reject) =&gt; {
        switch (country) {
          case "United States":
            resolve([
              { value: 'Washington', label: 'Washington' },
              { value: 'California', label: 'California' }
            ]);
            break;
          case "Canada":
            resolve([
              { value: "Alberta", label: "Alberta" },
              { value: "NovaScotia", label: "Nova Scotia" }
            ]);
            break;
          default:
            resolve([]);
        }
      });
    }
  
    render() {
      return (
        &lt;Formik
          initialValues={{ country: "None", region: "None", regions: [] }}
          onSubmit={this.handleSubmit}
        &gt;
          {({ isSubmitting }) =&gt; (
            &lt;Form&gt;
              &lt;label htmlFor="country"&gt;Country&lt;/label&gt;
              &lt;Field id="country" name="country" as="select"
                onChange={this.handleCountryChanged}&gt;
                &lt;option value="None"&gt;Select country&lt;/option&gt;
                &lt;option value="United States"&gt;United States&lt;/option&gt;
                &lt;option value="Canada"&gt;Canada&lt;/option&gt;
              &lt;/Field&gt;
              &lt;label htmlFor="region"&gt;Region&lt;/label&gt;
              &lt;Field id="region" name="region" as="select"&gt;
                &lt;option value="None"&gt;Select region&lt;/option&gt;
                {this.state.regions.map(r =&gt; (&lt;option key={r.value} value={r.value}&gt;{r.label}&lt;/option&gt;))}
              &lt;/Field&gt;
              &lt;button type="submit" disabled={isSubmitting}&gt;Submit&lt;/button&gt;
            &lt;/Form&gt;
          )}
        &lt;/Formik&gt;);
    }
  }
  
  export default App;```
  
  </code></pre>