---
title: "Discussion on \"How to create a Microsoft Fluent UI Searchable Dropdown Component with react\" | Hashnode"
description: "Discussion on \"How to create a Microsoft Fluent UI Searchable Dropdown Component with react\". Build a custom React component for Fluent UI dropdown with search, using onSearchValueChanged to filter options. [Demo](https://jhfyv9.csb.app)"
url: "https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to create a Microsoft Fluent UI Searchable Dropdown Component with react](https://spfx-app.dev/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react?utm_source=hashnode&utm_medium=feed)

Build a custom React component for Fluent UI dropdown with search, using onSearchValueChanged to filter options. \[Demo\](https://jhfyv9.csb.app)

Dec 1, 2023 · 5 min read · spfx-app.dev  
Read the article

-   [#fluentui](https://hashnode.com/tag/fluentui)
-   [#fluent-ui](https://hashnode.com/tag/fluent-ui)
-   [#spfx](https://hashnode.com/tag/spfx)
-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#typescript](https://hashnode.com/tag/typescript)

## Written by

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

@Seryoga · Nuremberg, Germany

  
[View profile](https://hashnode.com/@Seryoga)

Software Architect

I am Sergej and I am a Software Architect from Germany (AURUM GmbH). I have been developing on Microsoft technologies for more than 14 years, especially in SharePoint / Microsoft 365. With this blog, I want to share my knowledge with you and also improve my English skills. The posts are not only about SPFx (SharePoint Framework) but also about tips & tricks around the M365 world & developments of all kinds. The posts are about TypeScript, C#, Node.js, Vue.js, Visual Studio/ VS Code, Quasar, PowerShell, and much more. I hope you will find some interesting posts. I would also be happy if you follow me. Greetings from Germany Sergej / $€®¥09@

## Responses 2

Markdown supported · ⌘↵ to post

[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 ?

[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)

[BBS Tester](https://hashnode.com/@bbs384)

[Mar 3, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/65e4d3510ea903557427ae74)

Hi , Can you please help , how to setup dev environment for spfx viva connection. Currently i have 30 web-parts under my production workspace. I need to host this in same tenant with dev environment.

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

[Mar 4, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/65e4d3510ea903557427ae74#reply-65e57ddc5e7a532110872401)

Hi, I'm not sure if I understand you correctly or what you are planning to do! You want two different "environments" on the same tenant with possibly different versions of the web part(s)? If yes, create a site collection app catalog and deploy it in the site collection only.

[BBS Tester](https://hashnode.com/@bbs384)

[Mar 6, 2024](https://hashnode.com/posts/how-to-create-a-microsoft-fluent-ui-searchable-dropdown-component-with-react/6569d0924ffc2ac22398dc3a/comment/65e4d3510ea903557427ae74#reply-65e7d37389d7ba0d312d1665)

Thanks Let me try out same. :) [$€®¥09@](https://hashnode.com/@Seryoga)