title: Passing Data from Depending Dropdown to Object in React
body: <p>I am still new in learning React. I just have a question regarding to my problem. I want to use dependent dropdown which take state, district and postcode value. District value is dependent on state value and postcode value is dependent on district value. I just want to pass the dependent dropdown value to my; const [formData, setFormData] = useState({...}), using hooks which then will save it in database. However, because of it is a dependent dropdown, I still stuck on how to pass it. Below is may code:</p>
  <pre><code>const [selectedState, setSelectedState] = React.useState(&quot;&quot;);
  const [selectedDistrict, setSelectedDistrict] = React.useState(&quot;&quot;);
  const [selectedPostcode, setSelectedPostcode] = React.useState(&quot;&quot;);
  
  const availableDistrict = data.state.find((c) =&gt; c.name === selectedState);
  const availablePostcode = availableDistrict?.city?.find(
    (s) =&gt; s.name === selectedDistrict
  );
  </code></pre>
  <p>Below is code to pass the data to my back-end and save it into the database:</p>
  <pre><code>const [formData, setFormData] = useState({
      dobbyName: &quot;&quot;,
      dobbyNum: &quot;&quot;,
      openTime: &quot;&quot;,
      closeTime: &quot;&quot;,
      dobbyType: &quot;&quot;,
      dobbyEmail: &quot;&quot;,
      dobbyAddress: &quot;&quot;,
      dobbyPostcode: &quot;&quot;,
      dobbyDistrict: &quot;&quot;,
      dobbyState: &quot;&quot;,
      dobbyDescription: &quot;&quot;,
    });
  
    const {
      dobbyName,
      dobbyNum,
      openTime,
      closeTime,
      dobbyType,
      dobbyEmail,
      dobbyAddress,
      dobbyPostcode,
      dobbyDistrict,
      dobbyState,
      dobbyDescription,
    } = formData;
  
    const onChange = (e) =&gt;
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = (e) =&gt; {
      e.preventDefault();
      createLaundry(formData, history);
    };
  </code></pre>
  <p>Below is the dependent dropdown menu:</p>
  <pre><code>&lt;InputLabel id=&quot;demo-simple-select-helper-label&quot;&gt;
     State
  &lt;/InputLabel&gt;
    &lt;Select
      labelId=&quot;demo-simple-select-helper-label&quot;
      id=&quot;demo-simple-select-helper&quot;
      value={selectedState}
      label=&quot;State&quot;
      onChange={(e) =&gt; setSelectedState(e.target.value)}
     &gt;
     &lt;MenuItem&gt;--Choose State--&lt;/MenuItem&gt;
      {data.state.map((value, key) =&gt; {
       return (
        &lt;MenuItem value={value.name} key={key}&gt;
          {value.name}
        &lt;/MenuItem&gt;
      );
      })}
   &lt;/Select&gt;
  
  &lt;InputLabel id=&quot;demo-simple-select-helper-label&quot;&gt;
     District
  &lt;/InputLabel&gt;
    &lt;Select
      labelId=&quot;demo-simple-select-helper-label&quot;
      id=&quot;demo-simple-select-helper&quot;
      value={selectedDistrict}
      label=&quot;District&quot;
      onChange={(e) =&gt; setSelectedDistrict(e.target.value)}
     &gt;
     &lt;MenuItem&gt;--Choose District--&lt;/MenuItem&gt;
      {availableDistrict?.city.map((e, key) =&gt; {
       return (
         &lt;MenuItem value={e.name} key={key}&gt;
           {e.name}
         &lt;/MenuItem&gt;
        );
      })}
   &lt;/Select&gt;
  
  &lt;InputLabel id=&quot;demo-simple-select-helper-label&quot;&gt;
     Postcode
  &lt;/InputLabel&gt;
    &lt;Select
      labelId=&quot;demo-simple-select-helper-label&quot;
      id=&quot;demo-simple-select-helper&quot;
      value={selectedPostcode}
      label=&quot;Postcode&quot;
      onChange={(e) =&gt; setSelectedPostcode(e.target.value)}
     &gt;
     &lt;MenuItem&gt;--Choose Postcode--&lt;/MenuItem&gt;
     {availablePostcode?.postcode.map((e, key) =&gt; {
       return (
         &lt;MenuItem value={e} key={key}&gt;
           {e}
         &lt;/MenuItem&gt;
        );
      })}
   &lt;/Select&gt;
                  
  </code></pre>
  <p>And this is the example code for dependent dropdown:
  <a href="https://codesandbox.io/s/sweet-monad-kzp3p?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/sweet-monad-kzp3p?file=/src/App.js</a></p>
  <p>Hope you all can help me. Thank you.</p>