Populate posts with author and display author - mern - node.js

Question

I am trying to make a relationship between the post and the user/author but I'm struggling to populate the posts with the author and display the author of the post. I can create posts with various fields but how would I populate the author (username) in the post with node and display it in react?
Part of Post schema
const {ObjectId} = mongoose.Schema.Types
...
author: {
id: {
type: ObjectId,
ref: "User"
},
username: String
},
controllers/posts.js
exports.create = (req, res) => {
const {title, body, date } = req.body
const post = new Post({title, body, date, author: ........ })
post.save()
.then(response => {res.send(response)})
.catch(err => {
res.send(err)
})
}
exports.list = (req, res) => {
Post.find()
.populate("author", "_id name")
.select("-photo")
.limit(5)
.exec((err, posts) => {
if (err) {
res.send(err);
}
res.send(posts)
})
}
components/CreatePost.js
class CreatePost extends React.Component {
constructor(props) {
super(props)
this.state = {
title: '',
body: ''
}
}
changeHandler = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
submitHandler = e => {
e.preventDefault()
axios({ url: `${API}/new-post`, method: 'POST', data: this.state})
.then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
}
render() {
const {title, body} = this.state
return (
<div>
<form onSubmit={this.submitHandler}>
<input type="text" name="title"
onChange={this.changeHandler} value={title} />
<input type="text" name="body"
onChange={this.changeHandler} value={body}/>
<button type="submit">Submit</button>
</form>
</div>
)
}
}
export default CreatePost

Answer 1

You are not populating the author in your create controller. Consider the following:
exports.create = (req, res) => {
const {title, body, date } = req.body
const post = new Post({title, body, date, author: ........ }).populate('author', '_id name')
As you do in the .list controller.