Access Returned Object Properties from Router - node.js

Question

I start my server using nodemon which starts the server on localhost 8080
I go to localhost:8080/api which returns:
[{"date":"1587946153337","_id":"5ea622b6334c4de9fa307b20","post":"This is the first post!","__v":0},{"date":"1603312852793","_id":"5f909d49d75c9b1ec2e39ee7","post":"this is a test","__v":0},{"date":"1603313042345","_id":"5f909dea89eeee2d40e933c6","post":"this is a second test post","__v":0},{"date":"1603483744050","_id":"5f9338b12e575d3935b0b16b","post":"hiiii","__v":0},{"date":"1603483572093","_id":"5f9338b264236f36c48c3a60","post":"e","__v":0},{"date":"1604349323678","_id":"5fa06dcd59aeeba1e1845c0f","post":"was","__v":0}]
How can I gain access to the properties that are returned? For example, I want to display the post property as HTML.
The object that seems to hold the properties is data from api.js
const router = express.Router();
const mongoose = require('mongoose');
const https = require("https");
const Post = require('../models/post'); // This is the model to use
// Routes
router.get('/', (req, res) => {
Post.find( { })
.then((data) => {
console.log('Data: ', data);
const log = res.json(data);
//console.log(log);
})
.catch((error) => {
console.log('Error: ', daerrorta);
});
});
Here is my server.js
const express = require('express');
const mongoose = require('mongoose');
const morgan = require('morgan');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 8080;
const routes = require('./routes/api');
const postString = "test";
const commentString = "test";
const profString = "test";
const univString = "test";
// MONGODB ACCOUNT INFO:
// Usermame: MyCampusAdmin
// Password: AdminForMyCampus
// MongoDB URI
const MONGODB_URI = 'mongodb+srv://MyCampusAdmin:AdminForMyCampus#mycampus-whyic.mongodb.net/MyCampus?retryWrites=true&w=majority';
mongoose.connect(MONGODB_URI || 'mongodb://localhost/MyCampus', {
useNewUrlParser: true,
useUnifiedTopology: true
});
mongoose.connection.on('connected', () => {
console.log('Mongoose is connected');
});
// Data parsing
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// HTTP request logger
app.use(morgan('tiny'));
app.use('/api', routes);
//function makePost(p) {
// p = postString;
// postData
// const postData = {
// post: p,
// univID: 1,
// numLikes: 0
// };
// Post Save
// const newPost = new Post(postData); // Instance of the new model
// Post Save
// newPost.save((error) => {
// if (error) {
// console.log('Something went wrong with post save');
// }
// else {
// console.log('Post data has ben saved');
// }
// });
//}
function makeComment(c) {
c = commentString;
// commentData
const commentData = {
comment: c,
postID: 1,
numLikes: 0
};
// Comment Save
const newComment = new Comment(commentData);
// Comment Save
newComment.save((error) => {
if (error) {
console.log('Something went wrong with comment save');
}
else {
console.log('Comment data has ben saved');
}
});
}
function addProf(pr) {
pr = profString;
// profData
const profData = {
name: pr,
univID: 1,
department: "SE",
classes: "Applied Research"
};
// Prof Save
const newProf = new Prof(profData);
// Prof Save
newProf.save((error) => {
if (error) {
console.log('Something went wrong with prof save');
}
else {
console.log('Prof data has ben saved');
}
});
}
function addUniv(u) {
u = univString;
// univData
const univData = {
university: u
};
// University Save
const newUniv = new University(univData);
// Universoty Save
newUniv.save((error) => {
if (error) {
console.log('Something went wrong with university save');
}
else {
console.log('University data has ben saved');
}
});
}
// COMMENT SET UP
// Comment Schema Declaration
const SchemaComment = mongoose.Schema;
// Comment Schema
const CommentSchema = new SchemaComment ({
comment: String,
postID: Number,
date: {
type: String,
default: Date.now()
},
numLikes: Number,
});
// Comment Model
const Comment = mongoose.model('Comment', CommentSchema);
//PROF SET UP
// Prof Schema Declaration
const SchemaProf = mongoose.Schema;
// Professor Schema
const ProfSchema = new SchemaProf ({
name: String,
univID: Number,
department: String,
classes: String
});
// Professor Model
const Prof = mongoose.model('Professor', ProfSchema);
// UNIV SET UP
// University Schema Declaration
const SchemaUniv = mongoose.Schema;
// University Schema
const UnivSchema = new SchemaUniv ({
university: String,
});
// University Model
const University = mongoose.model('University', UnivSchema);
//TESTING FUNCTIONS
// makePost(postString);
// makeComment(commentString);
// addProf(profString);
// addUniv(univString);
app.listen(PORT, console.log(`Server is starting at ${PORT}`));
//app.listen(3000, function(){
// console.log("Server 3000");
//});
/*
app.get("/", function(req, res){
res.sendFile(__dirname + "/AccountSetUp.jsx");
});
app.post("/", function(req, res){
res.sendFile(__dirname + "/AccountSetUp.jsx");
});
*/
Here is my api.js
const router = express.Router();
const mongoose = require('mongoose');
const https = require("https");
const Post = require('../models/post'); // This is the model to use
// Routes
router.get('/', (req, res) => {
Post.find( { })
.then((data) => {
console.log('Data: ', data);
const log = res.json(data);
//console.log(log);
})
.catch((error) => {
console.log('Error: ', daerrorta);
});
});
router.get("/", function(req, res){
https.get(Post, function(response){
console.log(response.statusCode);
})
res.send("hello")
})
router.post('/save', (req, res) => {
console.log('Body: ', req.body);
const data = req.body;
const newPost = new Post(data);
newPost.save((error) => {
if (error) {
res.json({ msg: 'Sorry, internal server errors'});
}
else {
// Post
res.json({
msg: 'Your data has been saved!!'
});
}
});
});
router.get('/name', (req, res) => {
const data = {
username: 'name',
age: 20
};
res.json(data);
});
module.exports = router;
This is all the code I have for the component that is to fetch and render the data. I'm not sure how to access the data returned from router.get in this component.
DisplayPost.tsx
import { router } from "../routes/api";
export const DisplayPost = () => {
return(
<>
<div>Welcome</div>
</>
)
}