# Render a component within a Widget. (Using select-kit components within plugin code)
**URL:** https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462
**Category:** Development
**Created:** [April 3, 2018, 12:55pm UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462 "2018-04-03T12:55:25Z")
**Posts on this page:** 12
**Page:** 2
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 31, 2022, 9:26am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/22 "2022-08-31T09:26:09Z")
> [@david](#):
>
> for state to work you need to define a `buildKey` and a `defaultState()` method.
Yeah, I have those defined. I’ll tidy and push to a repo.
A test demonstrating a form of two way binding with an embedded Component would be extremely helpful! 🙏
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [August 31, 2022, 10:04am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/23 "2022-08-31T10:04:22Z")
> [@merefield](#):
>
> `this.state` is undefined within the change function, so that makes things a bit tricky?
I was able to access that, and the `scheduleRerender()` function. Updated tests and docs in
[https://github.com/discourse/discourse/pull/18145](https://github.com/discourse/discourse/pull/18145)
Just confirming - your `@bind` is imported from `discourse-common/utils/decorators`?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 31, 2022, 10:32am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/24 "2022-08-31T10:32:58Z")
> [@david](#):
>
> your `@bind` is imported from `discourse-common/utils/decorators`?
Confirmed
Here’s the repo: [GitHub - merefield/discourse-tc-bars-tag-intersection-chooser: A small widget to allow you to navigate to a topic list based on a combinations of tags · GitHub](https://github.com/paviliondev/layouts-tag-intersection-widget)
And the widget file specifically: [layouts-tag-intersection-widget/layouts-tag-combo.js.es6 at master · paviliondev/layouts-tag-intersection-widget (github.com)](https://github.com/paviliondev/layouts-tag-intersection-widget/blob/master/javascripts/discourse/widgets/layouts-tag-combo.js.es6)
Very much WIP and non-working as stated.
(Requires Layouts plugin installed and configured to test as is, but trivial to extract the widget code)
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [August 31, 2022, 11:04am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/25 "2022-08-31T11:04:21Z")
Ah, I think this might help:
```diff
- @onChange={{action @data.onChangeUpdateTagSet}}/>
+ @onChange=@data.onChangeUpdateTagSet/>
```
When passing a ‘closure action’, there is no need for the `(action` helper (and in this case, I guess it actually breaks things)
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 31, 2022, 11:09am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/26 "2022-08-31T11:09:39Z")
That appears to result in `TypeError: this.attrs.onChange is not a function`?
But yeah, maybe that helper is masking the available attributes?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [August 31, 2022, 11:15am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/27 "2022-08-31T11:15:48Z")
Oh my bad, we need some curlys there, otherwise it’s just parsed as a string attribute.
```diff
- @onChange={{action @data.onChangeUpdateTagSet}}/>
+ @onChange={{@data.onChangeUpdateTagSet}} />
```
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 31, 2022, 11:38am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/28 "2022-08-31T11:38:39Z")
Unfortunately that results in the same error?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [August 31, 2022, 12:14pm UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/29 "2022-08-31T12:14:27Z")
Can you add a breakpoint and find out what the value of `this.attrs.onChange` is? (The “pause in exception” feature in the dev tools may help here)
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 31, 2022, 2:01pm UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/30 "2022-08-31T14:01:32Z")
@David and I have resolved this over PM:
> [@On another topic](https://meta.discourse.org/t/237694/2):
>
> It turns out that, in widgets, `@bind` only works for Widgets defined using the class syntax. That’s why it works in the test - I was doing `class Blah extends Widget { ... }`.
>
> For non-class-based widgets, you’ll need to bind the function manually like
>
> ```plaintext
> hbs``,
> {
> closeUserMenu: this.closeUserMenu.bind(this),
> }
>
> ```
Thanks so much for your time @David.
I’ll publish the TC once complete.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 31, 2022, 3:40pm UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/31 "2022-08-31T15:40:11Z")
This is now a thing, albeit slightly roughly finished atm:
Requires the [Layouts Plugin](https://meta.discourse.org/t/layouts-plugin/55208).
Repo of Theme Component here: [GitHub - merefield/discourse-tc-bars-tag-intersection-chooser: A small widget to allow you to navigate to a topic list based on a combinations of tags · GitHub](https://github.com/paviliondev/layouts-tag-intersection-widget)
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [November 12, 2023, 12:16am UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/32 "2023-11-12T00:16:37Z")
FYI this component supports Right Sidebar Blocks now too!
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [March 6, 2024, 4:50pm UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/33 "2024-03-06T16:50:43Z")
FYI This component supports [Discourse Bars 🍻 🍸 (a sidebar framework)](https://meta.discourse.org/t/discourse-bars/298216)
[Previous page](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462.md?page=1)