I am currently developing a basic react front-end paired with an Express backend. Is it possible for me to have express send JSX data as JSON so that I can fetch it in react and utilize it as a component? Right now, I am sending JSON data and successfully displaying it in react as a component. How can I achieve sending JSX data as JSON?
Here is the current code snippet, React front-end:-
import React, { Component } from "react";
import "./App.css";
class App extends Component {
state = { users: [] };
componentDidMount() {
fetch("http://localhost:3001/users")
.then(res => res.json())
.then(users => this.setState({ users }))
.catch(error => { });
}
render() {
return <div className="App">
<h1>Users</h1>
{this.state.users.map(user => <div key={user.id}>
{user.username}
</div>)}
</div>;
}
}
export default App;
Express Backend:-
var express = require("express");
var router = express.Router();
/* 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([
{
id: 1,
username: "samsepi0l"
},
{
id: 2,
username: "D0loresH4ze"
}
]);
});
module.exports = router;