Creating a Dropdown Component in SPFx Using React

In this article, we will explain how the following code demonstrates a dropdown component using React with Fluent UI in a SharePoint Framework (SPFx) web part:

import * as React from 'react';
import { Dropdown, IDropdownOption } from '@fluentui/react';

// Dropdown options
const options: IDropdownOption[] = [
  { key: 'option1', text: 'Option 1' },
  { key: 'option2', text: 'Option 2' },
  { key: 'option3', text: 'Option 3' },
];

export default class DropdownWebPart extends React.Component {
  state = { selectedKey: '' }; // Initialize state with an empty selection

  // Handle dropdown selection change
  private handleChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
    this.setState({ selectedKey: option.key }); // Update state when an option is selected
  };

  // Render method to display the dropdown and the selected option
  public render(): React.ReactElement {
    return (
      <div>
        <Dropdown
          placeholder="Select an option"
          options={options}
          onChange={this.handleChange} // Pass the handleChange function to handle option selection
        />
        <p>Selected: {this.state.selectedKey}</p> {/* Display the selected option */}
      </div>
    );
  }
}

Breakdown of the Code:

1. Dropdown Component:

• The Dropdown component from Fluent UI provides the dropdown interface. It’s initialized with the list of options defined in options, which are passed as props to the Dropdown.

1. State Management:

• The state object has a single property selectedKey, which tracks the option selected by the user.
• this.setState() is used to update the state whenever a new option is selected. This triggers a re-render, showing the updated selected option.

1. Event Handling:

• The handleChange function is passed to the Dropdown as the onChange event handler. It updates the component’s state based on the user’s selection.

1. Render Method:

• Inside the render() function, we display the Dropdown component and use a <p> element to show the currently selected option dynamically.
• When a user selects an option, the handleChange method is invoked, updating the state and displaying the selection.

Key React Concepts:

1. State: React state in SPFx web parts is crucial because it allows dynamic interaction with components. Here, state controls what the user selects in the dropdown, making the UI interactive.
2. Component Re-rendering: When setState() is called in React, the component re-renders, reflecting the updated state and enabling responsive behavior.
3. Event Handling: By passing the handleChange function to the onChange event of the Dropdown, we can capture user input and update the state.

Why State is Essential in SPFx:

In SharePoint Framework (SPFx), React state allows components to react to user input and other dynamic changes without manually refreshing the page. This is particularly useful for modern, interactive web parts like dropdowns, forms, or other controls that depend on user actions.

This simple yet powerful approach to managing user inputs through state ensures that SPFx components remain dynamic, modular, and easy to maintain.