The array data passed over is sent as a Promise how do I access it

Question

I have a backend connected to mongoDB through mongoose. I have a controller that send user data like this

const db = require("../../auth/models");
const User = db.user


const addProduct = (req, res) => {

User.findOne({
    username: req.body.username
}, function(err, user) {
    if (err) {
        res.status(500).send({ message: err })
    }else{
      
        user.store.push({
  
            id: req.body.id, 
            barcode: req.body.barcode,
            productName : req.body.productName,
            price : req.body.price,
            quantity: req.body.quantity
        
        })
        user.save(function(err, newUser) {
            if (err) {
                res.status(500).send({ message: err });
            } else {
                console.log(newUser);
                res.status(200).send({ message: "Product updated successfully!!"})
            }
        })
    }
})



res.status(200).send({ message: "Product updated successfully!!"})
};

function currentUserStoreData  (req, res)  {
    User.findOne({
        username: req.body.username
        }, function(err, user) {
        if (err) {
            res.status(500).send({ message: err })
        }else{
          return( user.store )
        }
      
    });
  
};



const sendProducts = (req, res) => {
console.log(currentUserStoreData );
  res.status(200).send(currentUserStoreData )
}

const  inventory = {
    addProduct,
    currentUserStoreData ,
    sendProducts,



};

module.exports = inventory

The user.store is in the form of an array but the console log is shown as undefined

then a routes file that has a POST request that is used to send the username to currentUserStoreData , And a GET request that gets the data returned by the currentUserStoreData which is caught by sendProductsData and the routes look like this

    const controller = require("../controller/inventory.controller")

module.exports = function(app) {
    app.use(function(req, res, next) {
      res.header(
        "Access-Control-Allow-Headers",
        "x-access-token, Origin, Content-Type, Accept"
      );
      next();
    });

    app.post('/api/inventory/currentUser', controller.currentUserStoreData );
     
    app.get('/api/inventory/getProductData', controller.sendProducts)
};

And

there is a service file that handles the routes through axios like this import axios from "axios";

const user = JSON.parse(localStorage.getItem("user"));
const username = user.username

const API_URL = "http://localhost:8080/api/inventory/";

const addProduct = (id, barcode, productName, price, quantity) => {
    return axios.post(API_URL + "additem" , {
        username,
        id,
        barcode,
        productName,
        price,
        quantity,
    });
};

const currentUsername = () => {
 return axios.post(API_URL + "currentUser" , {
     username,
 })
}

const fetchProduct = () => {
    return axios.get(API_URL + "getProductData")
}

export default {
    addProduct,
    fetchProduct,
    currentUsername
};

when I import it from another file to map through the array I have imported the service file and used it like this

  import React from 'react'
import ProductService from "../services/product-service.js"
import Table from 'react-bootstrap/Table'
import {useState, useEffect} from "react";

 ProductService.currentUsername();

const createRow = (product) => {
  console.log(product);

    return (
      
    <tr>
        <td>{product.id}</td>
        <td>{product.barcode}</td>
        <td>{product.productName}</td>
        <td>{product.price}</td>
        <td>{product.quantity}</td>
    </tr>
    )
}
const InventoryTable = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    ProductService
      .fetchProduct()
      .then(data => setData(data));
  }, []);
    console.log(data);
    return (
      <div>
        <Table striped bordered hover variant="dark">
          <thead>
            <tr>
              <th>Id</th>
              <th>barcode</th>
              <th>Product Name</th>
              <th>Price</th>
              <th>Quantity</th>
            </tr>
          </thead>
          <tbody>
          {data.map(createRow)}
          </tbody>
        </Table>
      </div>
    );
    }
  

export default InventoryTable

now I'm stuck plss help if wanted anything ask in comment section

Thanks for the help in advance.

Answer 1

You can't access asynchronous code in the render of a React component as rendering is a completely synchronous process.

You can access the returned Promise and save the result locally to the component. Use a mounting useEffect hook to access the fetch service and save the resolved data into local state. Map the state to the rows.

import ProductService from "../services/product-service.js"

const InventoryTable = () => {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    ProductService
      .fetchProduct()
      .then(data => setData(data));
  }, []);
  
  return (
    <div>
      <Table striped bordered hover variant="dark">
        <thead>
          <tr>
            <th>Id</th>
            <th>barcode</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          {data.map(createRow())}
        </tbody>
      </Table>
    </div>
  );
};