How to use React to show a dialog when api detect HTTP Status is 401

Here is an example on how to make an HTTP request and how to access/check the HTTP response status code:

async function makeRequest() {
    try {
        const response = await fetch('https://randomlink.com/api/');

        if (response.status === 401) {
            // open modal
        }
    } catch (err) {
        console.log(err);
    }
}

await makeRequest();

First of all, you should use useState to contain the dialog status (default value is false). The value is used by DialogComponent (Example: From any library as MUi, Antd,...) In the API function, you can use try/catch in order to catch the error status. Then you use setState to update the dialog's state.

Example:

    const [isOpen, setIsOpen] = useState(false)
    
    const getData = async() => {
       try {
         await getDataFromApi()
       } catch (error) {
        if (axios.isAxiosError(error) && error.response.status === 401) {
          // do something ...
          setIsOpen(true)
        }
       }
    }

    return (
      <div>
       // components...
       <DialogComponent isOpen={isOpen}/>
      </div>
   )