# Functional React Components with Ignition SDK

**URL:** <https://forum.inductiveautomation.com/t/functional-react-components-with-ignition-sdk/55721>\
**Category:** Module Development\
**Created:** [February 3, 2022, 4:37pm UTC](https://forum.inductiveautomation.com/t/functional-react-components-with-ignition-sdk/55721 "2022-02-03T16:37:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cody.tamaki](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cody.tamaki](https://forum.inductiveautomation.com/u/cody.tamaki)\
**Post date:** [February 3, 2022, 4:37pm UTC](https://forum.inductiveautomation.com/t/functional-react-components-with-ignition-sdk/55721/1 "2022-02-03T16:37:01Z")

</div>

I think I already know the answer to this question but is there any support for Functional React components inside the Module SDK? If not are there any plans to support this?

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [February 3, 2022, 5:12pm UTC](https://forum.inductiveautomation.com/t/functional-react-components-with-ignition-sdk/55721/2 "2022-02-03T17:12:30Z")

</div>

Yes, functional components can be used inside of the Module SDK. Many of the components offered in Perspective are built that way. You only need to create a reference to the functional component to pass into the class that you create that implements ComponentMeta:

```auto
const BarcodeScannerInput = (props: ComponentProps<BarcodeScannerInputProps>) => {
  ...
}

```

…and then inside of the meta class (this is no different than using class components):

```auto
...
getViewComponent(): PComponent {
    return BarcodeScannerInput;
}
...

```

---

<div class="post-metadata">

**Author:** ![cody.tamaki](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cody.tamaki](https://forum.inductiveautomation.com/u/cody.tamaki)\
**Post date:** [February 8, 2022, 4:57pm UTC](https://forum.inductiveautomation.com/t/functional-react-components-with-ignition-sdk/55721/3 "2022-02-08T16:57:35Z")

</div>

One more followup questions - how do I go about exposing functional component state (from the useState() hook) as props? I’m assuming I use the “installReactions” method in the ComponentMeta?

I’m basically trying to write back to the perspective property tree whenever an item is “selected” by my component.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 9, 2022, 7:43am UTC](https://forum.inductiveautomation.com/t/functional-react-components-with-ignition-sdk/55721/4 "2022-02-09T07:43:07Z")

</div>

I dont particualry use a functional react, but the principal should be the same.

Item selection can be done done by triggereing an event or i suppose you can also set a property.  
When i need to change a property i do this in the meta:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/d/8d3bcc3b1c58a47ebfa27632b68a627c7a83277e.png)

you can also trigger an event like this: (in the brackets{ } go all the params you want to expose to the event)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/8129c1a38b6a754fad77d0d92a9a415bcf9fed0e.png)