title: React State not changing after Axios request
body: <p>I'm currently trying to build a search with an API request to my backend. So far that is working but my state for the loading icon is not fully going back to it's &quot;false&quot; state after the results are showing. I'm also not getting any errors. I logged the state and it indicates that false is set for loading after the results are showing, but my code on line 81-91 doesn't seem to update my loading element accordingly.</p>
  <pre><code>import { useContext ,useState } from 'react';
  import { AuthContext } from &quot;../contexts/AuthContext&quot;
  import {
    Button,
    Form,
    Input,
    Spin
  } from 'antd';
  import axios from 'axios';
  import Results from '../containers/Results';
  import { API } from &quot;../api&quot;
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };
  
  const Searches = () =&gt; {
  
    const [loading, setLoading] = useState(false)
    const [results, setResults] = useState([])
  
  
    const { accessToken } = useContext(AuthContext);
  
    const onFinish = (values) =&gt; {
      const Name =
        values[&quot;input-numbersearches&quot;] === undefined ? null : values[&quot;input-numbersearches&quot;];
      
      setLoading('true');
  
      axios.get(API.facilities.search, {
        headers: {
          &quot;Authorization&quot;: `Bearer ${accessToken}`
        },
        withCredentials: true,
        params: {
          Name
        }
      })
      .then(res =&gt; {
        setResults(res.data);      
        setLoading('false');
      })
      .catch(err =&gt; {
        console.log(err);
      });
    };
  
  
    return (
      &lt;div&gt;
        &lt;h1 className=&quot;&quot;&gt;Claim Facilities&lt;/h1&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;Form
          name=&quot;validate_other&quot;
          {...formItemLayout}
          onFinish={onFinish}
          initialValues={{
          }}
        &gt;
  
  
  
            &lt;Form.Item name=&quot;input-numbersearches&quot; noStyle&gt;
              &lt;Input
                name=&quot;searchfields&quot;
                placeholder=&quot;enter facility name&quot;
                // onSubmit={value =&gt; console.log(value)}
                style={{ width: 200 }}
              /&gt;          
    
            &lt;/Form.Item&gt;
            &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot;&gt;
              Search
              &lt;/Button&gt;
          {results ? ( 
            &lt;Results facilities={results} /&gt;
          ) : (
            &lt;h1&gt;No results&lt;/h1&gt;
          )}
          {loading ? ( &lt;div className='loading'&gt;
            &lt;Spin /&gt;
          &lt;/div&gt;
          ) : (
            &lt;Results facilities={results} /&gt;
          )}
          &lt;Form.Item
            wrapperCol={{
              span: 12,
              offset: 6,
            }}
          &gt;
          &lt;/Form.Item&gt;
        &lt;/Form&gt;
      &lt;/div&gt;
      
    );
  };
  
  export default Searches;
  </code></pre>
  <p>I initially tried it this way which makes more sense to me but it resulted in the results now showing but instead i got the loading icon endlessly:</p>
  <pre><code>        {loading ? ( &lt;div className='loading'&gt;
            &lt;Spin /&gt;
          &lt;/div&gt;
          ) : (
            &lt;Results facilities={results} /&gt;
          )}
  </code></pre>