How to get value from Promise & use that later?

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.

The promise will never be resolved before the `return` statement executes and the function ends, so `productName` will always be `undefined` at that point, and `undefined` will always be the return value of that function. Your only option is to return the promise and handle that promise in your other code: `const getProdcutName = (id) => getProductDetails(id).then(response => response.data.name);` — jsejcksn, Dec 05 '22 at 20:05
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — jsejcksn, Dec 05 '22 at 20:08
@jsejcksn Hello dear, can you please check the problem again. I have edited the question & tried to briefly explain the issue. — Sifat Hasan Wakib, Dec 06 '22 at 10:05

score 0 · Accepted Answer · answered Dec 08 '22 at 09:30

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>

How to get value from Promise & use that later?

1 Answers1