setState to a state located in App.js from another file

I have a file called api.js where I have my axios configs stored. I'm currently using axios and I want to log the user out if any axios request receives a response with a 401 status code. Now my problem is that how can I clear the states in App.js from the api.js file?

/* api.js */
import axios from "axios";

const api = axios.create();

api.interceptors.request.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      /* clear all states in App.js */
      console.log("unauthenticated");
    }
    return Promise.reject(error);
  }
);

  /* states in App.js */
  const [user, setUser] = useState(null);
  const [shifts, setShifts] = useState([]);
  const [jobs, setJobs] = useState([]);

I am assuming you are using useState hook manage states in the App component. Its not really the way for you to directly manipulate the state of the react component outside of that component.

To fix it, i would suggest maybe using Context API. This way you can consume it where its needed - in your case the api.js file.

Here is an code example usage: AuthContext.js

import React, { useState, createContext } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [shifts, setShifts] = useState([]);
  const [jobs, setJobs] = useState([]);

  const logout = () => {
    setUser(null);
    setShifts([]);
    setJobs([]);
  };

  return (
    <AuthContext.Provider value={{ user, shifts, jobs, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

At the App level - add the context:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './AuthContext';

    ReactDOM.render(
      <React.StrictMode>
        <AuthProvider>
          <App />
        </AuthProvider>
      </React.StrictMode>,
      document.getElementById('root')
    );

and finally edit your api.js file with changes as such:

import axios from 'axios';
import { useContext } from 'react';
import { AuthContext } from './AuthContext';

const api = axios.create();

api.interceptors.request.use(
  (response) => {
    return response;
  },
  async (error) => {
    if (error.response.status === 401) {
      const { logout } = useContext(AuthContext);
      logout();
      console.log("unauthenticated");
    }
    return Promise.reject(error);
  }
);