# Setting the ID for a Model component

**URL:** <https://community.mappedin.com/t/setting-the-id-for-a-model-component/483>\
**Category:** Mappedin JS\
**Tags:** react\
**Created:** [November 21, 2025, 11:40am UTC](https://community.mappedin.com/t/setting-the-id-for-a-model-component/483 "2025-11-21T11:40:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steve\_Lydiatt](https://yyz2.discourse-cdn.com/flex004/user_avatar/community.mappedin.com/steve_lydiatt/32/313_2.png) [@Steve\_Lydiatt](https://community.mappedin.com/u/Steve_Lydiatt)\
**Post date:** [November 21, 2025, 11:40am UTC](https://community.mappedin.com/t/setting-the-id-for-a-model-component/483/1 "2025-11-21T11:40:13Z")

</div>

Hello,

When adding a Model to a Map using the mapView.Models.add() function, we get back the newly added Model object. This has the ID property so we can easily maintain a mapping to the object represent by the Model - for example the registration number of a vehicle.

{

“97cf15c1-ad62-412b-ab1a-78ab33dd9419”: “ABC 123H“,

} etc…..

When using the JSX synxtax like this however, we lose this ability as there isn’t a way to set the ID:-

 ![image](https://canada1.discourse-cdn.com/flex004/uploads/mappedin/original/1X/09a7bb4108dcd7027bc86dffc821da4ff40ceaf3.png)

Is there a way to achieve this, or add some kind of tag to the Model so we can maintain such a mapping? This would help to refer back to the original object in event handlers where we only see the ID of the model in the events models array:-

```
 models: Array(1)

 0: Em2

  groupId: "fd005ea7-e214-42ad-adb7-5bb64e77b3bc"

  id: "97cf15c1-ad62-412b-ab1a-78ab33dd9419"

  __type: "model"

```

Thanks

Steve

---

<div class="post-metadata">

**Author:** ![msohm](https://yyz2.discourse-cdn.com/flex004/user_avatar/community.mappedin.com/msohm/32/6_2.png) [@msohm](https://community.mappedin.com/u/msohm)\
**Post date:** [November 21, 2025, 9:19pm UTC](https://community.mappedin.com/t/setting-the-id-for-a-model-component/483/2 "2025-11-21T21:19:27Z")

</div>

You can use the ref to get the Mappedin JS Model that was just added like this.

```auto
const modelRef = useRef<Mappedin.Model | null>(null);
return (
	<Model ref={modelRef} ... />

```