Modify Axios request with inputs from React Modal - reactjs

Question

I'm creating a React web app which would show a modal on every POST request asking users to add a approval token. This approval token would be added to the request header, before sending the request to the server.
I'm using axios to make a request as follows:
axios({
url: '/backend/call',
method: 'POST'
})
I'm intercepting the request through axios interceptors, to show the modal here. The modal has a text box and a submit button.
axios.interceptors.request.use(function (config) {
if (config.method === 'POST') {
ApprovalPopup.useApprovalPopup.showPopup(); // This displays the modal which has text field and Submit button
const token = --------; // How do I get the token from the Modal here, after submit is clicked.
config.headers.approvalToken = token;
}
return config;
});
Modal code for reference:
export type IApprovalPopup = {
showPopup: () => void;
};
const ApprovalPopupContext = createContext<IApprovalPopup>({
showPopup: () => undefined,
});
export default function ApprovalPopupProvider({children}: { children: ReactNode }) {
const dialogRef = useRef<HTMLDialogElement>(null);
const [ticketID, setTickedID] = useState('');
function handleSubmit() {
// update state and make backend call
}
function showPopup() {
dialogRef.current?.show()
}
return (
<ApprovalPopupContext.Provider
value={{
showPopup
}}
>
<span slot="body">
<div className="ticket-entry">
<Label> Ticket ID</Label>
<TextField onTextFieldChange={(event) => handleTicketIDEntry(event.detail.value)}
label="Ticket-ID"
value={ticketID}>
</TextField>
</div>
<div className="submit-section">
<div className="button">
<Button className="button" onClick={handleSubmit}>
Submit
</Button>
</div>
</div>
</span>
{children}
</ApprovalPopupContext.Provider>
);
}
ApprovalPopupProvider.useApprovalPopup = () => useContext(ApprovalPopupContext);
How do I get the token from the Modal and append it in the header before making the call to the server?
I could technically let the first call fail, and pass the config to the Modal as well. The Modal would then attach the header to the config and make the required call. But in that case how would I make sure the response goes back to the actual calling component. The calling component is updating local state objects / handling custom errors etc, so it needs the promise to be resolved

Answer 1

I think for you case it would be better to set axios header in handleSubmit function
simply add this :
function handleSubmit() {
axios.defaults.headers.common['approvalToken'] = token;
// update state and make backend call
}