# React FunctionComponent in Dash

**URL:** <https://community.plotly.com/t/react-functioncomponent-in-dash/35827>\
**Category:** Dash Python\
**Created:** [March 4, 2020, 8:14pm UTC](https://community.plotly.com/t/react-functioncomponent-in-dash/35827 "2020-03-04T20:14:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kkoster.pimco](https://avatars.discourse-cdn.com/v4/letter/k/91b2a8/32.png) [@kkoster.pimco](https://community.plotly.com/u/kkoster.pimco)\
**Post date:** [March 4, 2020, 8:14pm UTC](https://community.plotly.com/t/react-functioncomponent-in-dash/35827/1 "2020-03-04T20:14:55Z")

</div>

I have several React functional components (i.e. written in TypeScript and derived from FunctionComponent). Is there a way to integrate these into dash without having to write a class wrapper to supply the setProps method that it seems Dash requires?

Any useful information would be grateful.

Thanks.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 4, 2020, 8:37pm UTC](https://community.plotly.com/t/react-functioncomponent-in-dash/35827/2 "2020-03-04T20:37:01Z")

</div>

> [@kkoster.pimco](#):
>
> setProps

`setProps` is just a regular React `prop`, and so it can be accessed in functional & class components.

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [March 5, 2020, 7:30am UTC](https://community.plotly.com/t/react-functioncomponent-in-dash/35827/3 "2020-03-05T07:30:30Z")

</div>

[The `Select` component in dash-bootstrap-components](https://github.com/facultyai/dash-bootstrap-components/blob/master/src/components/input/Select.js) is implemented functionally in case it’s helpful to see an example.

---

<div class="post-metadata">

**Author:** ![kkoster.pimco](https://avatars.discourse-cdn.com/v4/letter/k/91b2a8/32.png) [@kkoster.pimco](https://community.plotly.com/u/kkoster.pimco)\
**Post date:** [March 5, 2020, 11:10am UTC](https://community.plotly.com/t/react-functioncomponent-in-dash/35827/4 "2020-03-05T11:10:35Z")

</div>

Thanks, that was very helpful. It looks like I will be creating a wrapper (kind of what I suspected) for the component.

---

<div class="post-metadata">

**Author:** ![kkoster.pimco](https://avatars.discourse-cdn.com/v4/letter/k/91b2a8/32.png) [@kkoster.pimco](https://community.plotly.com/u/kkoster.pimco)\
**Post date:** [March 5, 2020, 11:15am UTC](https://community.plotly.com/t/react-functioncomponent-in-dash/35827/5 "2020-03-05T11:15:06Z")

</div>

chriddyp,

Thanks, the Select example mentioned later provided this clarity as well. I was confused regarding this function since a React component also has a method called ‘setProps’ (which has been deprecated but still exists). I thought it was this method the documentation was referring to.