---
title: "Comment by Miguel Carreon on \"How to create a Microsoft Fluent UI Searchable Dropdown Component with react\" | Hashnode"
description: "How can I use it in SPFx React with hooks ?"
url: "https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/667e3c88c5e6d240cb0772a8"
---

[Discussion](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a)

Comment [How to create a Microsoft Fluent UI Searchable Dropdown Component with react](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a)

[Miguel Carreon](https://hashnode.com/@mcarreon83)

[Jun 28, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/667e3c88c5e6d240cb0772a8)

How can I use it in SPFx React with hooks ?

[$€®¥09@](https://hashnode.com/@Seryoga)

[Jun 28, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/667e3c88c5e6d240cb0772a8#reply-667e58f6a8eb7fe2013fe389)

Hi [Miguel Carreon](https://hashnode.com/@mcarreon83) What do you want to do? Do you want to use this class component in a functional component (hooks) in SPFx? Or would you like to know how you can "rebuild" the component with hooks?

[Miguel Carreon](https://hashnode.com/@mcarreon83)

[Jun 28, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/667e3c88c5e6d240cb0772a8#reply-667ec53a312f67445a2076f5)

[$€®¥09@](https://hashnode.com/@Seryoga)Hi, I like to know how I can rebuild the component with hooks

[Miguel Carreon](https://hashnode.com/@mcarreon83)

[Jun 28, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/667e3c88c5e6d240cb0772a8#reply-667ecb3dee3979de96129e21)

[$€®¥09@](https://hashnode.com/@Seryoga) Hi, I like to know how I can rebuild the component with hooks

[$€®¥09@](https://hashnode.com/@Seryoga)

[Jun 28, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/667e3c88c5e6d240cb0772a8#reply-667ed3d9d152685430b25732)

[Miguel Carreon](https://hashnode.com/@mcarreon83) The current code of the class component can be found [here](https://github.com/SPFxAppDev/fluentui-react-controls/blob/master/spfx/src/controls/components/searchableDropdown/SearchableDropdown.tsx)

You need to change the class component to a function component. The current component is stateless, so you need to replace all class methods with functions and it should work.

Alternatively, you can use my npm package `@spfxappdev/fluentui-react-controls` which contains [also this control](https://spfxappdev.github.io/fluentui-react-controls/?path=/docs/components-searchable-dropdown--docs)

A Live demo (PnP community call) is here: [youtube.com/watch](https://www.youtube.com/watch?v=nxG7n4e2Xlc)