title: 3rd dropdown is based off first 2 dropdown's selections but the 3rd's state is always 1 step behind
body: <p>I have the following code:</p>
  <pre><code>const [homeSelect, setHomeSelect] = useState('Home');
  const [hedgeSelect, setHedgeSelect] = useState('Hedge');
  const [symbolSelect, setSymbolSelect] = useState('');
  const [similarSymbols, setSimilarSymbols] = useState([]);
  
  const handleHome = (event) =&gt; {
      setHomeSelect(event.target.value);
      exchange_change();
    };
  
  const handleHedge = (event) =&gt; {
      setHedgeSelect(event.target.value);
      exchange_change();
  };
  
  const handleSymbol = (event) =&gt; {
      setSymbolSelect(event.target.value);
  };
  
  const exchange_change = () =&gt; {
      setSimilarSymbols([]);
      //add symbols together from selected dropdowns
      var allSymbols = response.content.symbols[homeSelect] + response.content.symbols[hedgeSelect];
      console.log(allSymbols);
  
      //sort the symbols
      allSymbols = allSymbols.split(&quot;,&quot;);
      var sort_arr = allSymbols.sort();
      console.log(sort_arr);
  
      //find duplicates
      for(var i = 0; i &lt; sort_arr.length-1; i++)
      {
        if(sort_arr[i + 1] == sort_arr[i]) { 
          setSimilarSymbols(similarSymbols =&gt; [...similarSymbols, sort_arr[i]]);
        }
      }
    }
  
  &lt;FormControl dense&gt;
      &lt;TextField
        id=&quot;standard-select-currency&quot;
        select
        label=&quot;Home&quot;
        className={classes.textField}
        value={homeSelect}
        onChange={handleHome}
        SelectProps={{
          native: true,
        }}
        helperText=&quot;Please select exchange&quot;
      &gt;
        &lt;option&gt;Home&lt;/option&gt;
        {response ? response.content.exchanges.map((option) =&gt; (
          &lt;option value={option}&gt;
            {option}
          &lt;/option&gt;
        )) : &lt;option&gt;Data is loading...&lt;/option&gt;}
      &lt;/TextField&gt;
    &lt;/FormControl&gt;
  
    &lt;FormControl dense&gt;
      &lt;TextField
        id=&quot;standard-select-currency&quot;
        select
        label=&quot;Hedge&quot;
        className={classes.textField}
        value={hedgeSelect}
        onChange={handleHedge}
        SelectProps={{
          native: true,
        }}
        helperText=&quot;Please select exchange&quot;
      &gt;
        &lt;option&gt;Hedge&lt;/option&gt;
        {response ? response.content.exchanges.map((option) =&gt; (
          &lt;option value={option}&gt;
            {option}
          &lt;/option&gt;
        )) : &lt;option&gt;Data is loading...&lt;/option&gt;}
      &lt;/TextField&gt;
    &lt;/FormControl&gt;
  
    &lt;FormControl dense&gt;
      &lt;TextField
        id=&quot;standard-select-currency&quot;
        select
        label=&quot;Symbols&quot;
        className={classes.textField}
        value={symbolSelect}
        onChange={handleSymbol}
        disabled={homeSelect == 'Home' || hedgeSelect == 'Hedge'}
        SelectProps={{
          native: true,
        }}
        helperText=&quot;Please select the exchanges&quot;
      &gt;
        &lt;option&gt;Symbol&lt;/option&gt;
        {console.log(similarSymbols.map((element) =&gt; (element)))}
        {response ? similarSymbols.map((option) =&gt; (
          &lt;option value={option}&gt;
            {option}
          &lt;/option&gt;
        )) : &lt;option&gt;Data is loading...&lt;/option&gt;}
      &lt;/TextField&gt;
    &lt;/FormControl&gt;
  </code></pre>
  <p>After <code>homeSelect</code> and <code>hedgeSelect</code> are selected, 'similarSymbols' should be populated with the according data.</p>
  <p>The issue is, 'similarSymbols' won't populate correctly until after <code>homeSelect</code> and <code>hedgeSelect</code> are selected one more time, for ex, select one dropdown and select another dropdown, and then select one of them one more time.</p>
  <p>It seems as if the state is 1 step behind and I can't figure out how to make it work.</p>
  <p>Any help is appreciated, thank you.</p>