> For the complete documentation index, see [llms.txt](https://trillo.gitbook.io/developing-ui-using-trillo-workbench/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://trillo.gitbook.io/developing-ui-using-trillo-workbench/developing-ui-using-trillo-workbench/react/app-functionalities/getting-a-record-of-item-details.md).

# Getting a Record of Item Details

Upon clicking an item record, smoothly transition the user to a dedicated section or page displaying the order records associated with that item's details.

Request URL: <https://api.eng-dev-1.trilloapps.com/ds/function/shared/GetItemDetails>

**Payload:**

<figure><img src="/files/MOhDJ6No7IjHOVvQgy2c" alt=""><figcaption><p>Item Details Payload</p></figcaption></figure>

**Preview:**

<figure><img src="/files/bjAxSqXB2OoWrQxelJWm" alt=""><figcaption><p>Item Details Preview</p></figcaption></figure>

**Item Details Overview**

* Present a summarized view of item records on the screen, which includes:
  * Item Name
  * Item Description&#x20;
  * Item Code
  * Item Weight
  * Item Quantity

#### Back To Item Record Button

* Maintain a clear and easily navigable path back to the item records screen, allowing users to switch between item and item detail records effortlessly.

<figure><img src="/files/zVaY0qKaAZRQSiV0Sin9" alt=""><figcaption><p>Back To Item Record Button</p></figcaption></figure>

#### Item Details Code Snippet

```
useEffect(() => {
       const fetchItemDetails = async () => {
         try {
           if (itemId) {
             // Make an API call
             setLoading(true)
             const response = await fetch(GET_DETAILS_API_URL, {
               method: 'POST',
               headers: headers,
               body: JSON.stringify({ "itemId": itemId }),
             });
             const data = await response.json();


             setItemData(data.data);
             setQuantity(data.data.quantity)
           }
         } catch (error) {
           console.error('Error fetching item details:', error);
         }
         finally{
           setLoading(false)
         }
       };
    
       // Call the fetchItemDetails function only if itemId has changed
       if (itemId !== null) {
         fetchItemDetails();
       }
     }, [itemId]);
```

#### Code Description

This function, fetchItemDetails, is an asynchronous function designed to fetch details for a specific item based on its ID (itemId). Here's a breakdown of its functionality:

**Check for Valid itemId**

* Check if itemId is truthy (not null or undefined) before making the API call. This ensures that the API call is made only if itemId has a valid value.

**API Request**

* If itemId is valid, set the loading state to true using setLoading(true).
* Makes a POST request to the specified GET\_DETAILS\_API\_URL using the Fetch API.
* Includes the provided headers and a request body containing the itemId in the form of a JSON string.

**Response Handling**

* Parses the JSON response from the API call using await response.json().
* Updates the component's state using setItemData(data.data) to set the entire item data and setQuantity(data.data.quantity) to set the quantity specifically.

**Error Handling**

* Catches and logs any errors that may occur during the API call using console.error.

**Finally Block**

Regardless of success or failure, set the loading state to false using setLoading(false). This ensures that the loading state is updated after the API call.