title: Dependent Dropdown with React Hooks
body: <p>I am new to react and have been having hard time implementing this dependent dropdown. I want to get the lists of states and filter out location that renders to the second dropdown. Below is what i tried implementing. The States and Location data is pulled from an API.</p>
  <p>I was able to pull the states data but got stuck at implementing the dependent dropdown. Any help will be appreciated.</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  
  function NullView() {
  
      // //API CALL
      const [error, setError] = useState(null);
      const [isLoaded, setIsLoaded] = useState(false);
      const [items, setItems] = useState([]);
  
      const [state, setState] = useState(null);
      const [locations, setLocations] = useState([])
      // console.log(count)
      let loadLocations = (e) =&gt; {
          e.preventDefault();
  
      }
  
      useEffect(() =&gt; {
          fetch(&quot;/api/merchant/all/states/&quot;)
              .then(res =&gt; res.json())
              .then((result) =&gt; {
                  setIsLoaded(true);
                  setItems(result);
              },
                  (error) =&gt; {
                      setIsLoaded(true);
                      setError(error);
                  }
              )
          if (state != null) {
              fetch(&quot;/api/merchant/locations/2/&quot;)
                  .then(res =&gt; res.json())
                  .then((result) =&gt; {
                      setIsLoaded(true);
                      setLocations(result);
                  },
                      (error) =&gt; {
                          setIsLoaded(true);
                          setError(error);
                      }
                  )
          }
  
  
      }, [])
  
  
      return (
          &lt;div&gt;
              &lt;form onChange={loadLocations}&gt;
                  &lt;label for=&quot;states&quot;&gt;Choose a State:&lt;/label&gt;
                  &lt;select id=&quot;states&quot; name=&quot;states&quot; onChange={(e) =&gt; setState(e.target.value)}&gt;
                      &lt;option value=&quot;&quot;&gt;Select State&lt;/option&gt;
  
                      {items.map(states =&gt; (
  
                          &lt;option key={states.id} value={states.id}&gt;{states.name}&lt;/option&gt;
                      ))}
  
                  &lt;/select&gt;
  
  
                  &lt;label for=&quot;location&quot;&gt;Choose a Location:&lt;/label&gt;
                  &lt;select id=&quot;location&quot; name=&quot;location&quot; onChange={(e) =&gt; setLocation(e.target.value)}&gt;
                      &lt;option value=&quot;&quot;&gt;Select Location&lt;/option&gt;
  
                      {Location.map(location =&gt; (
  
                          &lt;option key={location.id} value={location.id}&gt;{location.name}&lt;/option&gt;
                      ))}
  
                  &lt;/select&gt;
  
              &lt;/form&gt;
  
          &lt;/div&gt;
      )
  }
  
  export default NullView
  </code></pre>