setState not working with import class component - reactjs

Question

I have made a Class Component Token & import in App.js
In App.js, there is api having headers with Authorisation Key (i.e. Token)
I have tried this code so far
import React, {Component} from 'react';
import Token from './Token';
class App extends Component {
constructor(){
super();
this.state = { sliders: '', auth_key: ''};
}
componentWillMount(){
this.setState({
auth_key: <Token />
});
}
componentDidMount = () => {
//POST json
var dataToSend = { userid: '223' };
//POST request
fetch('API/PATH', {
method: 'POST', //Request Type
body: dataToSend, //post body
headers: {
'Content-Type': 'application/json',
'Authorization': this.state.auth_key
},
})
.then(response => response.json())
.then(responseJson => {
this.setState({ sliders: responseJson });
alert(JSON.stringify(responseJson));
})
.catch(error => {
console.error(error);
});
}
render(){
return this.state.sliders;
}
}
export default App;
this.state.auth_key in Authorisation not working. Please help to sort out this.
Token Component Class from which Token get passes to each component
import {Component} from "react";
export default class Token extends Component{
constructor(){
super();
this.state = {tokenid: ''};
}
componentDidMount = () => {
let formBody = { usertoken: '223' };
fetch('API/PATH', {
method: 'POST',
body: formBody,
})
.then(response => response.json())
.then(responseJson => {
this.setState({
'tokenid' : responseJson.authtoken
})
})
.catch(error => {
console.error(error);
this.setState({
'tokenid' : ''
})
});
}
render(){
return this.state.tokenid;
}
}