How to get username from userid using map function

[jyotirmoydas12]

I am working on a MERN app, where i have to render posts by users along with their usernames on the browser. I am able to retrieve the posts and the user_id but what i need is the username along with the post. the scripts are given below :

> Users model :

const mongoose = require('mongoose')

const UserSchema = new mongoose.Schema({
    name: {
        type : String,
        required : true,
    },
    email: {
        type : String,
        required : true,
        unique : true,
    },
    password : {
        type : String,
        required : true,
    },
});

const userModel = mongoose.model('users', UserSchema);
module.exports = userModel;

> Posts model :

const mongoose = require('mongoose')

const PostSchema = new mongoose.Schema({
    post_desc: {
        type: String,
        required: true,
    },
    owner: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'users',
    },
});

const postModel = mongoose.model('posts', PostSchema);
module.exports = postModel

Dashboard.js

import React, {useState, useEffect} from 'react'
import jwt_decode from "jwt-decode"
import { useNavigate } from 'react-router-dom'
import Axios from 'axios'


const Dashboard = () => {

    const navigate = useNavigate()
    const [user_id, setUserId] = useState()
    const [username, setUsername] = useState()
    const [myPost, setMyPost] = useState('')
    const [listOfPosts, setListOfPosts] = useState([])
    const [listOfUsers, setListOfUsers] = useState([])

    async function welcomeMsg() {
        const req = await fetch('http://localhost:3001/api/welcome', {
            headers: {
                'x-access-token': localStorage.getItem('token')
            },
        })

        const data = await req.json()
        if(data.status === 'ok') {            
            setUserId(data.user_id)
            setUsername(data.username)
            
        } else {
            alert('not ok man')
        }
    }    

    useEffect(() => {
        const token = localStorage.getItem('token')
        if(token) {
            const user = jwt_decode(token)
            if(!user) {
                localStorage.removeItem('token')
                navigate('/login')
            } else {
                welcomeMsg();
            }
        }

        Axios.get("http://localhost:3001/api/readPost")
        .then((response) => {
            // console.log(response);
            setListOfPosts(response.data);
        }).catch(() => {
            console.log("err")
        });

    }, [])


    async function submitPost(event) {
        event.preventDefault()

        const response = await fetch('http://localhost:3001/api/addpost',{
            method: 'POST',
            headers: {
                'Content-Type' : 'application/json'
            },
            body: JSON.stringify({
                myPost,
                user_id,
            }),
        })

        const data = await response.json()

    }

    return (
        <div>
            <h1>Hello { user_id } { username || 'guest'}</h1>
            <form onSubmit={submitPost}>
                <textarea 
                    placeholder='Your post here..'
                    value={myPost}
                    onChange={(e) => setMyPost(e.target.value)}
                />
                <input type="submit" value="Post it"/>
            </form>
            {listOfPosts.map((val) => {
                return (
                    <div>
                        {" "}
                        {val.post_desc}
                    </div>
                );
            })}
        </div>
    )
}

export default Dashboard;

index.js

const express = require('express');
const app = express();
const cors = require('cors');
const mongoose = require('mongoose');
const userModel = require('./models/Users');
const postModel = require('./models/Posts');
const jwt = require('jsonwebtoken');
require('dotenv').config();


app.use(cors());
app.use(express.json());

mongoose.connect(`mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@${process.env.DB_CLUSTER}.uufd0.mongodb.net/${process.env.DB_NAME}?retryWrites=true&w=majority`)

app.post('/api/register', async(req, res) => {
    console.log(req.body)
    try{
        await userModel.create({
            name : req.body.name,
            email : req.body.email,
            password : req.body.password,
        })
        res.json({ status: 'ok' })        
    } catch (err) {
        res.json({ status: 'error', error: 'Duplicate email' })
    }
});

app.post('/api/login', async(req, res) => {
    const user = await userModel.findOne({
        email: req.body.email,
        password: req.body.password,
    })

    if(user) {

        const token = jwt.sign(
            {
                name: user.name,
                email: user.email, 
            }, 
            'secret123'
        )


        return res.json({ status: 'ok', user: token })
    } else {
        return res.json({ status: 'error', user: false })
    }    
});

app.get('/api/welcome', async(req, res) => {

    const token = req.headers['x-access-token']

    try {
        const decoded = jwt.verify(token, 'secret123')
        const email = decoded.email
        const user = await userModel.findOne({ email: email })

        return res.json({ status: 'ok', user_id: user._id, username: user.name})
    } catch (error) {
        console.log(error)
        res.json({ status: 'error', error: 'Invalid token' })
    } 
});


app.post('/api/addPost', async(req, res) => {
    console.log(req.body)
    try{
        await postModel.create({
            post_desc: req.body.myPost,
            owner: req.body.user_id,
        })
        res.json({ status: 'ok' })
    }catch{
        res.json({ status: 'error', error: 'Could not add post !!'  })
    }
})

app.get('/api/readPost', async(req, res) => {
    postModel.find({}, (err, result) => {
        if(err){
            res.send(err);
        } else {
            
            res.send(result);
        }
    });
});

app.listen(3001, ()=> {
    console.log("Server connected at Port 3001..")
});