importing a state value from react class component - reactjs

Question

In my App.js I have this state object:
App.js
this.state = {
headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest",
Authorization:
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianR}
};
I want to export this.state.headers to my globalMethods.js file, which has a data posting function:
globalMethods.js
export function submitUserData() {
fetch("http://dev.test.lt/be/api/user/data", {
method: "POST",
body: JSON.stringify(data),
headers // <-- this exact variable has to be this.state.headers
})
.then(response => response.json())
}
Can't export headers from App.js, since export const headers = this.state.headers cannot access "this" scope.
Exports within App class are, of course, not possible.
Are there any other options?

Answer 1

You can pass the variable when you are calling the submitUserData.js.
callingUrl = () => {
const response = submitUserData(this.state.headers)
}
So your function should be like this...
export function submitUserData(customHeaders) {
fetch("http://dev.test.lt/be/api/user/data", {
method: "POST",
body: JSON.stringify(data),
headers: customHeaders
})
.then(response => response.json())
}

Answer 2

What you need is global state analog.
So my advice would be to create some plain js module named requestHelper.js with property
export const requestHeaders = headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest",}
and exporting method setHeader(name, value)
import that method into your app component, and call it on auth request success. Later get your headers from requestHelper.requestHeaders object anywhere in your app

Answer 3

You need some kind external intermediate container to do that. E. g. you can make your component save headers to localStorage or use Redux for that.
Or do it backwards: export your headers from globalMethods.js and use it inside class.

Answer 4

have you tried this:
import React from "react"
const header ={};
class App extends React.Component {
constructor(){
super()
this.state = {
headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest",
Authorization:
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianR}
};
}
render() {
header = this.state.headers
return <div/>
}
}
export header