title: How to update select items based on the selection from the first select items using react
body: <p>I have an array of objects like this:</p>
  
  <pre><code> const items = [ 
    { country:"USA", level:1},
    { country:"Canada", level:2},
    { country:"Bangladesh", level:3},
  ]
  </code></pre>
  
  <p>And in my Form component( I am using React Formik library)I am rendering the items like this:</p>
  
  <pre><code>     &lt;Field name="color" as="select" placeholder="Favorite Color"&gt;
           {items.map((item,index)=&gt;(
             &lt;option&gt;{item.country}&lt;/option&gt;
           ))}
      &lt;/Field&gt;
      &lt;Field name="color" as="select" placeholder="Favorite Color"&gt;
           {items.map((item,index)=&gt;(
             &lt;option&gt;{item.level}&lt;/option&gt;
           ))}
      &lt;/Field&gt;
  </code></pre>
  
  <p>Now,I need to update the value of second select items based on the items selection from the first select input. For example, when I will select "USA" from the first selection then in the second selection it will update the value and render "1". Any ideas or suggestion would be highly appreciated.
  So far, my component looks like this:</p>
  
  <pre><code>import React from 'react';
  import { Formik, Field } from 'formik';
  import { Modal } from 'react-bootstrap';
  
  const AddNewForm = () =&gt; {
  const items = [ 
    { country:"USA", level:1},
    { country:"Canada", level:2},
    { country:"Bangladesh", level:3},
  ]
  const handleUpdate = () =&gt; {
    console.log("change value...")
  }
  return (
      &lt;div&gt;
    &lt;Formik
    initialValues={{ country: '', level: '' }}
    onSubmit={(values, { setSubmitting }) =&gt; {
      setTimeout(() =&gt; {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  &gt;
    {({
      values,
      errors,
      touched,
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
      /* and other goodies */
    }) =&gt; (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;Field name="country" as="select" onChange={handleUpdate}&gt;
           {items.map((item,index)=&gt;(
             &lt;option&gt;{item.country}&lt;/option&gt;
           ))}
      &lt;/Field&gt;
      &lt;Field name="level" as="select"&gt;
           {items.map((item,index)=&gt;(
             &lt;option&gt;{item.level}&lt;/option&gt;
           ))}
      &lt;/Field&gt;
      &lt;Modal.Footer&gt;
      &lt;button type="submit" disabled={isSubmitting}&gt;
          Save
        &lt;/button&gt;
        &lt;/Modal.Footer&gt;
      &lt;/form&gt;
    )}
  &lt;/Formik&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>}export default AddNewForm;</p>