Add data to populate the select, and give it basic event handling like opening, closing, and selecting an option.

1) Add state properties to the constructor of the App class.

This code goes below super(props);.

this.state = {
  options: [
    <SelectOption value="Alabama" />,
    <SelectOption value="Florida" />,
    <SelectOption value="New Jersey" />,
    <SelectOption value="New Mexico" />,
    <SelectOption value="New York" />,
    <SelectOption value="North Carolina" />
  ],
  selected: null,
  isOpen: false
};

2) Add the deconstructed state properties to the top of the App class's render function.

const { options, selected, isOpen } = this.state;

3) Update the Select properties with values from the state that was added in step 2.

a. Assign the selections property to selected.

This variable informs the component of what is currently selected.

b. Assign the isOpen property to isOpen.

This boolean controls if the select menu is expanded.

c. Replace the text inside of the Select component.

Search for (Add options here) and replace this with the {options} object. This list determines what is rendered in the expanded select menu.

4) Add event handling functions to the component.

a. Copy the following onToggle function into the constructor of the App class.

This function should go under the state declaration. This function controls the isOpen property, which opens and closes the select menu.

this.onToggle = isOpen => {
  this.setState({
    isOpen
  });
};

b. Copy the following onSelect function into the constructor of the App class.

This function should go under the onToggle function added in step 4a. This function acts as a callback when a select option is clicked. It updates the selected state property, and thereby what is rendered as selected in the component.

this.onSelect = (event, selection) => {
  this.setState({
    selected: selection,
    isOpen: false
  });
};

5) Update the Select properties with the functions added to the constructor in step 4.

a. Assign the onToggle property to this.onToggle.

b. Assign the onSelect property to this.onSelect.

The select component should look like the following.

<Select 
  onToggle={this.onToggle} 
  onSelect={this.onSelect} 
  selections={selected} 
  isOpen={isOpen} 
  placeholderText="Select a state"
>
  {options}
</Select>

Now the select is set up. It can be opened and closed, and options are selectable.

With a basic select component in place, build a more complex example in this step, by using the available variants.

The select component has four variants: single, checkbox, typeahead, and multiple option. When no variant is specified, the component defaults to the single variant.

The single and typeahead variants allow for a single selection at a time, while the checkbox and multiple option typeahead variants allow for multiple selections at a time.

1) Add SelectVariant to the list of imports from @patternfly/react-core. With this import in place, this enum's options may be used rather than a string literal.

The import statement should look like this:

import { Select, SelectOption, SelectVariant } from "@patternfly/react-core";

2) Add the variant property to the select component.

This involves assigning the variant property to the typeahead variation declared by the SelectVariant enum.

Setting this property to typeahead changes the select component's structure to allow user input that filters the list of options.

variant={SelectVariant.typeahead}

3) Add a function to clear text input.

Add the function below to the constructor of the App class.

this.clearSelection = () => {
  this.setState({
    selected: null,
    isOpen: false
  });
};

4) Add an onClear property to the select component.

Assign onClear to the function that was added in step 3.

onClear={this.clearSelection}

The select should be filterable after this step.

Customize the select component. There are many options available to customize the select component and its options.

One such customization, for both typeahead and multiple typeahead variants, is custom filtering.

By default, these variants match the entered input with the options' values in order. For example, given the "Alabama" option value, an "Ala" text input would match but a "bama" text input would not.

Allow any input to be matched, regardless of ordering.

1) Add the following custom filtering function to the constructor of the App class.

The component expects a function that will return a list of options to display. In the code below, the text input is matched regardless of ordering using a regular expression and sanitizes the text input to avoid extraneous characters. Using the same example above, this will mean that a text input of "bama" would still match for the option "Alabama".

this.customFilter = e => {
  const { options } = this.state;
  let input;
  try {
    input = new RegExp(e.target.value.toString(), "i");
  } catch (err) {
    input = new RegExp(
      e.target.value.toString().replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
      "i"
    );
  }
  let typeaheadFilteredChildren =
    e.target.value.toString() !== ""
      ? options.filter(option => input.test(option.props.value.toString()))
      : options;
  return typeaheadFilteredChildren;
};

2) Add an onFilter property to the select component.

Assign onFilter property to the function that was added in step 1.

onFilter={this.customFilter}

Custom display and custom data can be used to customize the select options. These are also available for all variants.

Begin with customizing the data.

To change what data is passed around, and passed back on selection, implement a class that contains any data you wish to persist and a toString function, which converts the data in the structure to a string format. This allows the component to internally compare options for filtering, and gives some limited customization for the option's display.

1) Add a CustomDataState class.

Add the class to the App.js file, outside of the App class.

Note: This class may contain any amount of properties, and these will be passed back as data when an option is selected. The toString function tells the select component how to display and compare the data as a string.

class CustomDataState {
  constructor(name, abbreviation, capital, founded) {
    this.name = name;
    this.abbreviation = abbreviation;
    this.capital = capital;
    this.founded = founded;
  }
  toString = () =>
    `${this.name} (${this.abbreviation}) - Founded: ${this.founded}`;
}

2) Replace the state's options property.

Replace the property with the following array that uses CustomDataState. The state is located in the App class constructor.

options: [
  <SelectOption
    value={new CustomDataState("Alabama", "AL", "Montgomery", 1846)}
  />,
  <SelectOption
    value={new CustomDataState("Florida", "FL", "Tailahassee", 1845)}
  />,
  <SelectOption
    value={new CustomDataState("New Jersey", "NJ", "Trenton", 1787)}
  />
]

3) Edit the state's options property to use a custom display.

Replace the property with the following array, or edit the children property of each option.

Instead of using the toString function in CustomDataState, the select component will display and filter options based on the children property.

options: [
  <SelectOption
    value={new CustomDataState("Alabama", "AL", "Montgomery", 1846)}
  >
    Alabama / AL
  </SelectOption>,
  <SelectOption
    value={new CustomDataState("Florida", "FL", "Tailahassee", 1845)}
  >
    Florida / FL
  </SelectOption>,
  <SelectOption
    value={new CustomDataState("New Jersey", "NJ", "Trenton", 1787)}
  >
    New Jersey / NJ
  </SelectOption>
]

New values are displayed, and the typeahead filtering will match based on this display. In the case of HTML structures passed as a child, the component will convert the structure to a string for filtering.

Once the preview reloads, it should look like this:

Typeahead variants support adding new options, based on the user entered input. This is supported in two parts, first by allowing a user to select their custom input, and second by allowing this custom input to be added to the overall list of options for permanence.

1) Add the isCreatable flag to the select component.

isCreatable

Note: With this flag, when text is entered that does not match anything in the list, a new message is displayed prompting the user to create an option based on the input. This selectable message replaces the "no results found" message displayed when filtering would otherwise return nothing. This allows the current value to be used as a new selection, but does not persist the data. This means the option will appear as selected, but will not appear in the overall list.

2) Add a function to add a new value to the options array.

This function below adds custom-entered options to the state's options property, allowing it to show up in the overall options list. Add this function in the constructor of the App class.

this.onCreateOption = newValue => {
  this.setState({
    options: [
      ...this.state.options,
      <SelectOption
        value={new CustomDataState(newValue, "any", "other data", 0)}
      >
        {newValue}
      </SelectOption>
    ]
  });
};

Note: The function receives the text input entered by the user and is triggered when a new option is selected.

3) Add an onCreateOption property to the select component.

Assign onCreateOption to the function that was added in step 2.

onCreateOption={this.onCreateOption}

There are additional miscellaneous properties that can be used to customize general visual aspects of the select component.

1) Add a width property to the select component.

Assign it to "50%".

This property controls the overall width of the select toggle, using pixels or percentages.

width="50%"

2) Add a maxHeight property to the select.

Assign it to {100}.

This property controls the maximum height of the expanded select menu, using pixels or percentages.

maxHeight={100}

3) Add a noResultsFoundText property to the select component.

Assign it to "Nothing found".

This property allows you to customize the text that appears when no results are found by the filtering function.

noResultsFoundText="Nothing found"

4) Add a createText property to the select component.

Assign it to "Create new option".

This property allows you to customize the text that appears when the isCreateable property is present.

createText="Create new option"

Note: The variable prefixes the input text, formatting the displayed text as follows: {createText} "{input value}"

Once the preview reloads, it should look like this: