Difficulty: intermediate
Estimated Time: 30 minutes

The PatternFly React library provides a collection of React components to build interfaces with consistent markup, styling, and behavior. In this course, build a PatternFly select component, starting with the single select variant, and then expanding the example using the typeahead select variant and adding customization.

In this scenario, learn how to use the PatternFly select component.

Congratulations! You finished the "select component: beginner" course.

Please fill out a quick survey here

Learn more about PatternFly React:

Select component: beginner

Step 1 of 7

Set up import statements and structure

Create a basic select component.

Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.

1) Navigate to the src folder and open src/App.js

2) Copy the code into the App.js file to set up the structure of the select component.

import React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Select, SelectOption } from "@patternfly/react-core";
class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>
        <Select 
          onToggle={Function.prototype} 
          onSelect={Function.prototype} 
          selections={null} 
          isExpanded={false} 
          placeholderText="Select a state"
        >
          (Add options here)
        </Select>
      </React.Fragment>
    );
  }
};
export default App;

Once the preview reloads, it should look like this: basic select