# UI Button Click Not Triggering State Change in 8thWall Studio ECS

**URL:** <https://forum.8thwall.com/t/ui-button-click-not-triggering-state-change-in-8thwall-studio-ecs/8105>\
**Category:** Technical Support\
**Created:** [August 18, 2025, 5:14pm UTC](https://forum.8thwall.com/t/ui-button-click-not-triggering-state-change-in-8thwall-studio-ecs/8105 "2025-08-18T17:14:51Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [August 19, 2025, 8:57pm UTC](https://forum.8thwall.com/t/ui-button-click-not-triggering-state-change-in-8thwall-studio-ecs/8105/7 "2025-08-19T20:57:36Z")

</div>

Hi!

I’ve reviewed the code and it looks like some fundamentals are missing. The state machine definitions aren’t quite correct and there’s a number of syntax errors. As a really small example I created this simple component that changes a UI element image to give you an idea how to add listeners in a StateMachine.

```auto
import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Flipbook',
  schema: {
    uiElement: ecs.eid,
  },
  schemaDefaults: {
  },
  data: {
    frame: ecs.i32,
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const frames = [
      '',
      'assets/1.png',
      'assets/2.png',
      'assets/3.png',
    ]

    dataAttribute.set(eid, {
      frame: 0,
    })

    ecs.defineState('default')
      .initial()
      .listen(schemaAttribute.get(eid).uiElement, ecs.input.UI_CLICK, () => {
        dataAttribute.mutate(eid, (c) => {
          c.frame = Math.min(c.frame + 1, frames.length - 1)
        })

        ecs.Ui.set(world, eid, {
          image: `${frames[dataAttribute.get(eid).frame]}`,
        })

        console.log(ecs.Ui.get(world, eid).image)
      })
  },
})

```

---

_[View the full topic](https://forum.8thwall.com/t/ui-button-click-not-triggering-state-change-in-8thwall-studio-ecs/8105)._