title: how do i get rid of axios error uncaught (in promise)?
body: <p>I am facing the error that uncaught(in promise) in console, its axios related error, I here pasted the code userSearch.jsx file code, where error showing at the end of function's last bracket ? at the end of function's last bracket, I am getting cross sign, why ? and what's the real error?</p>
  <pre class="lang-js prettyprint-override"><code>import { useState, useContext } from &quot;react&quot;;
  import GithubContext from &quot;../../context/github/GithubContext&quot;;
  import AlertContext from &quot;../../context/alert/AlertContext&quot;;
  import { searchUsers } from &quot;../../context/github/GithubActions&quot;;
  
  function UserSearch() {
    const [text, setText] = useState('')
  
    const { users, dispatch } = useContext(GithubContext)
    const { setAlert } = useContext(AlertContext)
  
    const handleChange = (e) =&gt; setText(e.target.value)
  
    const handleSubmit = async (e) =&gt; {
      e.preventDefault()
  
      if (text === '') {
        setAlert('Please enter something', 'error')
      } else {
        dispatch({ type: 'SET_LOADING' })
        const users = await searchUsers(text)
        dispatch({ type: 'GET_USERS', payload: users })
  
        setText('')
      }
    }
  
  
  
    return (
      &lt;div className='grid grid-cols-1 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-2 mb-8 gap-8'&gt;
        &lt;div&gt;
          &lt;form onSubmit={handleSubmit}&gt;
            &lt;div className='form-control'&gt;
              &lt;div className='relative'&gt;
                &lt;input
                  type='text'
                  className='w-full pr-40 bg-gray-200 input input-lg text-black'
                  placeholder='Search'
                  value={text}
                  onChange={handleChange}
                /&gt;
                &lt;button
                  type='submit'
                  className='absolute top-0 right-0 rounded-l-none w-36 btn btn-lg'
                &gt;
                  Go
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        {users.length &gt; 0 &amp;&amp; (
          &lt;div&gt;
            &lt;button
              onClick={() =&gt; dispatch({ type: &quot;CLEAR_USERS&quot; })}
              className='btn btn-ghost btn-lg'
            &gt;
              Clear
            &lt;/button&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default UserSearch;
  
  </code></pre>
  <p>ERROR SHOWING IN CONSOLE</p>
  <pre><code>GET https://api.github.com/search/users?q=brad 401
  dispatchXhrRequest @ xhr.js:220
  xhrAdapter @ xhr.js:16
  dispatchRequest @ dispatchRequest.js:58
  request @ Axios.js:109
  Axios.&lt;computed&gt; @ Axios.js:131
  wrap @ bind.js:9
  searchUsers @ GithubActions.js:16
  handleSubmit @ UserSearch.jsx:21
  callCallback @ react-dom.development.js:4164
  invokeGuardedCallbackDev @ react-dom.development.js:4213
  invokeGuardedCallback @ react-dom.development.js:4277
  invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
  executeDispatch @ react-dom.development.js:9041
  processDispatchQueueItemsInOrder @ react-dom.development.js:9073
  processDispatchQueue @ react-dom.development.js:9086
  dispatchEventsForPlugins @ react-dom.development.js:9097
  (anonymous) @ react-dom.development.js:9288
  batchedUpdates$1 @ react-dom.development.js:26140
  batchedUpdates @ react-dom.development.js:3991
  dispatchEventForPluginEventSystem @ react-dom.development.js:9287
  dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
  dispatchEvent @ react-dom.development.js:6457
  dispatchDiscreteEvent @ react-dom.development.js:6430
  
  UserSearch.jsx:26 //ITS ERROR SHOWING BY THE END OF FUCNTION'S LAST BRACKET, ITS SHOWING CROSS SIGN ERROR AT THE END OF OF BRACKET
   
  Uncaught (in promise) AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
  handleSubmit @ UserSearch.jsx:26
  await in handleSubmit (async)
  callCallback @ react-dom.development.js:4164
  invokeGuardedCallbackDev @ react-dom.development.js:4213
  invokeGuardedCallback @ react-dom.development.js:4277
  invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
  executeDispatch @ react-dom.development.js:9041
  processDispatchQueueItemsInOrder @ react-dom.development.js:9073
  processDispatchQueue @ react-dom.development.js:9086
  dispatchEventsForPlugins @ react-dom.development.js:9097
  (anonymous) @ react-dom.development.js:9288
  batchedUpdates$1 @ react-dom.development.js:26140
  batchedUpdates @ react-dom.development.js:3991
  dispatchEventForPluginEventSystem @ react-dom.development.js:9287
  dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
  dispatchEvent @ react-dom.development.js:6457
  dispatchDiscreteEvent @ react-dom.development.js:6430
  </code></pre>
  <p>GithubAction.js file where axios is added</p>
  <pre class="lang-js prettyprint-override"><code>import axios from 'axios'
  const GITHUB_URL = process.env.REACT_APP_GITHUB_URL
  const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN
  
  const github = axios.create({
    baseURL: GITHUB_URL,
    headers: { Authorization: `token ${GITHUB_TOKEN}` },
  })
  
  // Get search results
  export const searchUsers = async (text) =&gt; {
    const params = new URLSearchParams({
      q: text,
    })
  
    const response = await github.get(`/search/users?${params}`)
    return response.data.items
  }
  
  // Get user and repos
  export const getUserAndRepos = async (login) =&gt; {
    const [user, repos] = await Promise.all([
      github.get(`/users/${login}`),
      github.get(`/users/${login}/repos`),
    ])
  
    return { user: user.data, repos: repos.data }
  }
  </code></pre>