In React, how do I display the results from an API get request? - node.js

Question

I've created API's for a standard transaction application (using mongoDB for DB), I have API's for users, products and orders. I managed to use and display the information stored about users and products, however, when I try to follow the same code for displaying my orders (which shares objects from products and users, in mongoDB collections) I get stuck. I know this has something to do with how I've named (const { _id, username, useremail, productname, productsellprice } = order;) as the _id works.
Other details: using= axios for http requests; context api with hooks (useContext, useReducer)
Im new to all this so forgive me if I've left out crucial information.
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import OrderContext from '../../context/order/orderContext';
const OrderItem = ({ order }) => {
const orderContext = useContext(OrderContext);
const { deleteOrder, setCurrent, clearCurrent } = orderContext;
const { _id, username, useremail, productname, productsellprice } = order;
const onDelete = () => {
deleteOrder(_id);
clearCurrent();
};
return (
<div className='card bg-light'>
<h3 className='text-primary text-left'>
{_id}{' '}
<span
style={{ float: 'right' }}
className={
'badge ' +
(productsellprice === 'professional' ? 'badge-success' : 'badge-primary')
}
>
{'£ ' + productsellprice}
</span>
</h3>
<ul className='list'>
{useremail && (
<li>
<i className='fas fa-marker' /> {useremail}
</li>
)}
{productname && (
<li>
<i className='fas fa-marker' /> {productname}
</li>
)}
</ul>
<p>
<button
className='btn btn-dark btn-sm'
onClick={() => setCurrent(order)}
>Edit
</button>
<button className='btn btn-danger btn-sm' onClick={onDelete}>
Delete
</button>
</p>
</div >
);
};
OrderItem.propTypes = {
order: PropTypes.object.isRequired
};
export default OrderItem;
I want to display the order data in a simple ui card. Currently it only displays the order_id

Answer 1

When you print order in console, you get this,
Object product: {_id: "5d1a62c40d16f11d94009a7a", name: "Lead18", sellprice: 104} saledate: "2019-07-03T19:08:05.630Z" user: email: "irl1984#yahoo.co.uk" name: "Kevin Kane" _id: "5d1cd8fbc02bc928d83ea109" proto: Object _id: "5d1cfd156cd4673840981c5d" proto: Object OrderItem.js:6 Object product: {_id: "5d1a62c40d16f11d94009a7a", name: "Lead18", sellprice: 104} saledate: "2019-07-03T18:43:14.409Z" user: {_id: "5d1cd8fbc02bc928d83ea109", name: "Kevin Kane", email: "irl1984#yahoo.co.uk"} _id: "5d1cf74207fa3337cceb5e1e" proto: Object
It means you are getting object inside object.
So instead of this,
const { _id, username, useremail, productname, productsellprice } = order;
You should use Destructuring nested objects,
const { product:{_id: product_id}, user:{name: username}, user:{email: useremail}, product:{name: productname}, product:{sellprice: productsellprice} } = order;
Here I am not sure which _id you want to show, if you want _id from user object then use this use:{_id}.