title: React form getting reset with every change in state?
body: <p>I am developing a simple crud form with <strong>formik</strong> in react for Learning purposes, this
  <a href="https://i.stack.imgur.com/AJgnO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AJgnO.png" alt="enter image description here" /></a></p>
  <p>Now in this form I am facing two issues</p>
  <p><strong>Ist Issue</strong></p>
  <p>As <strong>Quantity</strong> field should only input numbers so I added a onChange listener and updated state if only number are inputted, it works fine, but problem is it <strong>reset's</strong> the whole form</p>
  <pre><code>&lt;Field
      className=&quot;form-control&quot;
      type=&quot;text&quot;
      name=&quot;quantity&quot;
      onChange={this.onChangeCheckNumber}
  &gt;
  &lt;/Field&gt;
  
  onChangeCheckNumber = (event) =&gt; {
      const re = /^[0-9\b]+$/;
  
      // if value is not blank, then test the regex
  
      if (event.target.value === '' || re.test(event.target.value)) {
          this.setState({ quantity: event.target.value })
      }
  }
  </code></pre>
  <p>I think this piece of code is culprit</p>
  <pre><code>this.setState({ quantity: event.target.value })
  </code></pre>
  <p>As I am setting state, so I think my whole form gets re rendered again,</p>
  <p>How to achieve this functionality perfectly ?</p>
  <p><strong>2nd Issue</strong></p>
  <p><strong>Warehouse selection depends upon city selection</strong>, so I added a onChange on city and called warehouse for selected cityId and I am receiving data, but city drop down gets blocked.</p>
  <p>My state properties</p>
  <pre><code>state = {
          quantity: 0,
          price: &quot;0&quot;,
          comments: '',
          itemType: {
              key: 0,
              value: 'Select'
          },
          cities: {
              key: 0,
              value: 'Select'
          },
          warehouses: {
              key: 0,
              value: 'Select'
          },
          sellers: {
              key: 0,
              value: 'Select'
          },
          warehouseOptions: null
      }
  </code></pre>
  <p>In componentDidMount, I am initializing the dropdown values</p>
  <pre><code>componentDidMount() {
          this.itemTypeObject();
          this.cityObject();
          this.sellerObj();
      }
  </code></pre>
  <p>Fetching data with axios from server and updating state</p>
  <pre><code>cityObject = () =&gt; {
          axios.get('/cities')
              .then(response =&gt; {
                  this.setState({
                      cities: response.data
                  });
              }).catch(error =&gt; {
                  console.log(error);
              });
      }
  </code></pre>
  <p>Inside my <strong>Formik form</strong> tag my city and warehouse dropdowns</p>
  <pre><code>&lt;div&gt;
          &lt;label&gt;City&lt;/label&gt;
          &lt;div&gt;
              &lt;Field
                  as=&quot;select&quot;
                  onChange={this.onCityDropdownSelected}
                  name=&quot;city&quot;
              &gt;
                  {this.createCity()}
              &lt;/Field&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Warehouse&lt;/label&gt;
      &lt;div&gt;
          &lt;Field
              className=&quot;form-control&quot;
              as=&quot;select&quot;
              name=&quot;warehouse&quot;
          &gt;
              {this.state.warehouseOptions}
          &lt;/Field&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And my <strong>onCityDropdownSelected</strong></p>
  <pre><code>onCityDropdownSelected = (event) =&gt; {
          if (event.target.value !== &quot;0&quot;) {
              this.warehouseObj(event.target.value);
          } else {
              this.setState({
                  warehouseOptions: null
              })
          }
      }
  
  warehouseObj = (cityId) =&gt; {
          axios.get(`/warehouses/cityId/${cityId}`)
              .then(response =&gt; {
                  this.setState({
                      warehouses: response.data
                  });
                  this.createWarehouse();
              }).catch(error =&gt; {
                  console.log(error);
              });
      }
  </code></pre>
  <p>After this I get updated values in warehouse drop down, but city drop down opens , but does not change on selection.</p>