# Question about the number property

**URL:** <https://forums.realmacsoftware.com/t/question-about-the-number-property/45427>\
**Category:** Elements API\
**Created:** [November 27, 2024, 5:42pm UTC](https://forums.realmacsoftware.com/t/question-about-the-number-property/45427 "2024-11-27T17:42:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 27, 2024, 5:42pm UTC](https://forums.realmacsoftware.com/t/question-about-the-number-property/45427/1 "2024-11-27T17:42:21Z")

</div>

Is there a way to determine the number of div-elements using a number property? I’m looking for a method that allows a user in a custom component to set the number of div-elements through a numeric field in the inspector.

---

<div class="post-metadata">

**Author:** ![tpbradley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tpbradley/32/25503_2.png) [@tpbradley](https://forums.realmacsoftware.com/u/tpbradley)\
**Post date:** [November 27, 2024, 8:18pm UTC](https://forums.realmacsoftware.com/t/question-about-the-number-property/45427/2 "2024-11-27T20:18:45Z")

</div>

I think I understand what you’re after (though I could be wrong LOL)

You can generate items or content within the JS hooks file that can be used in a template.

So, create a custom component and add this to the properties file.

```auto
{
    "groups": [{
        "title" : "My Settings",
        "properties" : [{
            "title" : "Item count",
            "property" : "itemCount",
            "slider": {
                "default" : 10,
                "min" : 0,
                "max" : 40,
                "round" : true
            }
        }]
    }]
}

```

This gives us a slider ranging 0-40 called `itemCount`

Then, in the hooks file we can access the `itemCount` property and use it to generate items like this.

```auto
const transformHook = (rw) => {
        
    // Get the item count
    const { itemCount } = rw.props;

    // Generate array of items
    const items = Array.from({ length: itemCount }, (_, i) => i);    
    
    // Set items property to it can be used in the template
    rw.setProps({
        items
    });
}

exports.transformHook = transformHook;

```

Now we have an array of items in template data, we can loop over it in the template using an `@each` statement

```auto
<div class="text-lg text-center text-brand-500">
    @each(item in items)
        <div>Item {{item}}</div>
    @endeach
</div>

```

[Sample project](elementsapp://downloadDocument/4t6nrciKkbHv)

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 27, 2024, 8:46pm UTC](https://forums.realmacsoftware.com/t/question-about-the-number-property/45427/3 "2024-11-27T20:46:44Z")

</div>

Thanks a lot Tom ! This is exactly what I need 😀

It’s gonna give some Custom Components an extra dimension 🤓

---

<div class="post-metadata">

**Author:** ![tpbradley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tpbradley/32/25503_2.png) [@tpbradley](https://forums.realmacsoftware.com/u/tpbradley)\
**Post date:** [November 27, 2024, 8:47pm UTC](https://forums.realmacsoftware.com/t/question-about-the-number-property/45427/4 "2024-11-27T20:47:52Z")

</div>

Can’t wait to see what you’re cooking up!

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 27, 2024, 10:55pm UTC](https://forums.realmacsoftware.com/t/question-about-the-number-property/45427/5 "2024-11-27T22:55:04Z")

</div>

[The bubbles component](https://forums.realmacsoftware.com/t/custom-component-text-bubbles/45434) is the result 😅