fetch JSON array from node to Reactjs - json

Question

I'm trying to fetch an array on my node server on localhost:3000/users to my react app on localhost:3000.
The problem is I don't getting an array on react and cannot fetch anything to my list.
var express = require('express');
var router = express.Router();
var arr = [{
id: 1,
username: "samsepi0l"
}, {
id: 2,
username: "D0loresH4ze"
}];
/* GET users listing. */
router.get('/', function(req, res, next) {
// Comment out this line:
//res.send('respond with a resource');
// And insert something like this instead:
res.json(arr);
});
module.exports = router;
And the react App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {users: []}
componentDidMount() {
fetch("/users")
.then( (res) => res.json())
.then( (json) => {this.setState({users: json});});
}
render() {
return (
<div className="App">
<h1>Users</h1>
{this.state.users.map(user =>
<div key={user.id}>{user.username}</div>
)}
</div>
);
}
}
export default App;
How can I fetch the array to react page?
and here is the error that I got when I run the npm server:
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

Answer 1

You should implement the endpoint for the fetch("/users") call
router.get('/users', function(req, res, next) {
console.log('got the response');
res.json(arr);
});
Also, you need to separate your front end react app from your server express which handles the request.
You cannot have the same port which your apps are listening. Set up different port. I.E 8000 for the front end and 8080 for the express server
UPDATE
I've managed to reproduced the tutorial which i think is the same you have found based from here : https://medium.com/front-end-hacking/calling-express-api-in-react-using-react-script-e19084a76a8a
There is nothing wrong with the tutorial. You have to set up the proxy part in the client/package-json
"proxy" : "http://localhost:3005"
and in the bin/www you have to set the line from
var port = normalizePort(process.env.PORT || '3000');
to
var port = normalizePort(process.env.PORT || '3005');
finally you may need to install the concurrently dependency in the server package.json
finally i have attached the tree structure of the tutorial