# How to render Component inside Widget?

**URL:** https://meta.discourse.org/t/how-to-render-component-inside-widget/52872
**Category:** Development
**Created:** [November 14, 2016, 10:21am UTC](https://meta.discourse.org/t/how-to-render-component-inside-widget/52872 "2016-11-14T10:21:07Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mrded](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrded/32/62438_2.png) [@mrded](https://meta.discourse.org/u/mrded)
#### Post date: [November 14, 2016, 10:21am UTC](https://meta.discourse.org/t/how-to-render-component-inside-widget/52872/1 "2016-11-14T10:21:07Z")

</div>

Let’s say, I have a component `assets/javascripts/discourse/templates/components/example-component.hbs`:

```
<h2>Hello component!</h2>

```

And I have a widget `/assets/javascripts/discourse/widgets/example-widget.js.es6`:

```
import createWidget from 'discourse/widgets/widget';

export default createWidget('example-widget', {
  tagName: 'div',
  html() {
    return 'I want to render {{example-component}} in here.';
  }
});

```

How can I render a component inside a widget? Thanks.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [November 14, 2016, 4:45pm UTC](https://meta.discourse.org/t/how-to-render-component-inside-widget/52872/2 "2016-11-14T16:45:25Z")

</div>

If you have control over what you’re doing, I recommend rendering a widget within a widget rather than a component. However, in the cases where that’s not an option you can use the `connect` function of the decorator helper:

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6#L88-L107](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6#L88-L107)

---

<div class="post-metadata">

### Author: ![gdpelican](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gdpelican/32/81308_2.png) [@gdpelican](https://meta.discourse.org/u/gdpelican)
#### Post date: [July 28, 2017, 8:05am UTC](https://meta.discourse.org/t/how-to-render-component-inside-widget/52872/3 "2017-07-28T08:05:53Z")

</div>

I’m having a bit of trouble with the `connect` method; how would you recommend passing widget state to the component?

Specifically, I want to say

```plaintext
helper.connect({ component: 'emoji-picker', pickerIsActive: this.state.active })

```

And have that be somewhat equivalent to writing something like this in a component template:

```plaintext
{{emoji-picker active=pickerIsActive}}

```

@eviltrout ? ❤ 😃

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [July 28, 2017, 2:20pm UTC](https://meta.discourse.org/t/how-to-render-component-inside-widget/52872/4 "2017-07-28T14:20:36Z")

</div>

There’s no way to do this right now. The `connect` feature is meant to be a last resort because there are performance implications of using it. It _can_ use the model though. If the widget you are using has a model associated with it, your component will have it as the `model` attribute.