React API call with bearer token - reactjs

Question

I'm new to code and react. I am trying to make an API call to get the data. The problem is that the bearer token given to me expires every 24hrs and I don't know how to insert the Token code as a variable to my header authorization in my request in react to make it renew when it needs and deliver to me the JSON information.

Answer 1

something like this might work
import React from 'react';
const App = () => {
const token = "yourtokenhere";
const [result, setResult] = React.useState();
React.useEffect(()=>{
fetch('https://example.test/', {
method: "POST",
headers: {"Authorization": `Bearer ${token}`}
}).then(res => res.json()).then(json => setResult(json));
},[]);
return (
<>
{JSON.stringify(result)}
</>
);
};

Answer 2

For the authorization header, I would suggest interceptor.
Interceptors can perform tasks such as URL manipulation, logging, adding tokens to the header, etc before and after making an API request and response.
for fetch() API use, npm install fetch-intercept --save
import fetchIntercept from 'fetch-intercept';
const registerIntercept = fetchIntercept.register({
request: function (url, config) {
// Modify the url or config here
const authHeader = new Headers(config.headers);
authHeader.append('Authorization', 'Bearer 232Qefsg4fg4g'); // your token
config.headers = authHeader;
return [url, config];
},
requestError: function (error) {
// Called when an error occured during another 'request' interceptor call
return Promise.reject(error);
},
response: function (response) {
// Modify or log the reponse object
console.log(response);
return response;
},
responseError: function (error) {
// Handle a fetch error
return Promise.reject(error);
}
});
for Axios use, npm install axios
axios.interceptors.request.use(req => {
// `req` is the Axios request config, so you can modify
// the `headers`.
req.headers.authorization = 'my secret token';
return req;
});