React won't respond to any request - reactjs

Question

I am working on an app where I am making a request and trying to send my data back to react via fetch.
So far here's my router file:
router.get('/', (req, res, next) => {
console.log('I got here before request..... >>>>>>>>>');
request(`https://rest.coinapi.io//v1/exchangerate/BTC?apikey=${API}`, (error, response, body) => {
console.log('I got here..... >>>>>>>>>');
if(error){
console.log('error >>>>>>', error);
}
console.log(response.body);
});
});
And i included to main server,js
// include routes
var routes = require('./routes/index');
app.use('/', routes);
app.listen(3000, () => {
console.log('Listening to port 3000...');
});
And then finally I sent my data to react:
class MainApp extends Component{
constructor(props){
super(props);
this.state = {
data: null
}
}
componentDidMount() {
this.getInitial();
}
getInitial() {
fetch('/')
.then(resp => resp.json())
.then(data => this.setState({
data: data.rates
}))
.then(() => console.log('this is is a state >>>>+++', this.state))
.catch(err => console.log(err))
}
render(){
return (
<div>
<h1>HELLO WORLD FROM REACT CLIENT FRONTEND! PP</h1>
<p>{this.state.data}</p>
</div>
);
}
}
For some reason I am not getting any console.log on my express when i run my code and I am getting this error: SyntaxError: Unexpected token < in JSON at position 0
Any idea what am doing wrong why I can't change the state? and why the request doesn't run?

Answer 1

The problem isn't React. The data is in JSON form, which has bunch of keys, value inside. You need to use a map function to render the {this.state.data}. You can not call a entire JSON object like that. You have to dig deep in the JSON Object and get whatever you need.
Let's assume you have the following JSON data.
{
"crypto": {
"BTC": {
"name": "bitcoin",
"current_price": "$6592.3"
}
}
}
you can't just say {this.state.data}. In this case you probably will do something like this {this.state.data.crypto.BTC.name} to get the name of the BTC-crypto symbol. Using the map function you can get name and prices of all the crypto symbol assuming there are more.

Answer 2

actually your code on server does not send any response. When you are using console.log on server - you will see that messages in terminal, where you execute command "nodejs app.js" or some other to start server. To send response, depending on node framework, you are using, you should do something like this:
router.get('/', (req, res, next) => {
...
res.setHeader('Content-Type', 'application/json');
res.send(SOME_JSON);
});
Also as i see, your server is listening port 3000, but fetch sends request not there