The PatternFly React library provides a collection of React components for building interfaces with consistent markup, styling, and behavior.
This course involves building 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:

Steps
Select component: beginner
Set up import statements and structure
Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.
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} isOpen={false} placeholderText="Select a state" > (Add options here) </Select> </React.Fragment> ); } }; export default App;
Once the preview reloads, it should look like this: