How to get value from Promise & use that later? - reactjs

Question

Let me explain the issue, I am trying to show some details in a modal. I am using table in the modal to show details. In one section, I need the product name which is returned from a database query and I have to use that value returned from the database. The code for table is as follows:
<tbody>
{item.cartItems.map((item, i) =>
<tr key={item._id}>
<th scope="row">{i + 1}</th>
<th><img src={`${API}/product/photo/${item.product}`} alt={item.product.name} width="60px" height="50px" /></th>
<td>{**data returned from database**}</td>
<td align="center">{item.count}</td>
<td align="center">৳ {item.price * item.count} </td>
</tr>
)}
</tbody>
To get the data from the database, I am using a function
const getProdcutName = id => {
var productName;
getProductDetails(id)
.then(response => {
productName = response.data.name;
});
return productName;
}
But I can't access the value. The main thing is, in every Iteration I need to send the {item.product} to getProductName(id) and I need the name from the database in return. But I can't access the data from promise scope to return it.

Answer 1

This is the solution to my issue. Thanks to everyone who helped me out.
const CartItem = ({ item, i }) => {
const [productName, setProductName] = useState();
useEffect(() => {
getProductDetails(item.product)
.then(res => { setProductName(res.data.name) });
}, []);
return (
<tr key={item._id}>
<th scope="row">{i + 1}</th>
<th><img src={`${API}/product/photo/${item.product}`} alt={item.product.name} width="60px" height="50px" /></th>
<td>{productName == undefined ? "Getting Name" : productName}</td>
<td align="center">{item.count}</td>
<td align="center">৳ {item.price * item.count} </td>
</tr>
)}
And to send items to the cartItem
<tbody>
{item.cartItems.map((item, i) =>
<CartItem item={item} i={i} key={item._id} />
)}
</tbody>