React SelectBox - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your Angular, Vue, React, or jQuery application.

SelectBox is an editor that allows users to select a value from a drop-down list or add a new value.

In this tutorial, we will create the SelectBox and configure its basic features. The created UI component has a populated drop-down list, allows users to search through it, and logs the previous and current selected items to the console.

Refer to the following sections for details on each configuration step. You can also find the full code in the following GitHub repository: getting-started-with-selectbox.

Create the SelectBox

Use the code below to create an empty SelectBox:

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { SelectBox } from 'devextreme-react/select-box';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <SelectBox/>
  • );
  • }
  • }
  • export default App;

Run the code and ensure the SelectBox is displayed and its drop-down list says "No data to display." In the next step, we will add a data source.

Bind the SeleсtBox to Data

To bind the SelectBox to data, set the dataSource and the fields that provide the UI component's value (valueExpr) and displayed value (displayExpr). In this tutorial, the SelectBox is bound to a local array.

App.js
data.js
  • // ...
  • import { data } from './data';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <SelectBox
  • dataSource={data}
  • valueExpr="ID"
  • displayExpr="Name"
  • />
  • );
  • }
  •  
  • }
  •  
  • export default App;
  • export const data = [{
  • ID: 1,
  • Name: 'Banana',
  • Category: 'Fruits',
  • }, {
  • ID: 2,
  • Name: 'Cucumber',
  • Category: 'Vegetables',
  • }, {
  • ID: 3,
  • Name: 'Apple',
  • Category: 'Fruits',
  • }, {
  • ID: 4,
  • Name: 'Tomato',
  • Category: 'Vegetables',
  • }, {
  • ID: 5,
  • Name: 'Apricot',
  • Category: 'Fruits',
  • }];

If you run this code and open the SelectBox, you will see the the populated drop-down list. Next, we will enable search.

Enable Search

To allow users to search through SelectBox values, set searchEnabled to true:

App.js
  • // ...
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <SelectBox ...
  • searchEnabled={true}
  • />
  • );
  • }
  • }
  • export default App;

There are additional search properties demonstrated in the following demo:

View Demo

In the next step, we will process the SelectBox's value change event.

Handle the Value Change Event

Implement the onValueChanged function to perform an action when a user selects an item. In the code below, this function logs the selected item's ID and Name.

App.js
  • // ...
  •  
  • class App extends React.Component {
  • onValueChanged(e) {
  • const item = data.filter(i => i.ID === e.value)[0];
  • console.log(item.ID + ": " + item.Name);
  • }
  •  
  • render() {
  • return (
  • <SelectBox ...
  • onValueChanged={this.onValueChanged}
  • />
  • );
  • }
  • }
  • export default App;

Next, we will group the drop-down items.

Group Data

The SelectBox can display data grouped by category. To implement this, we will use the data from the previous steps with the DataSource component. Its API allows you to sort, filter, select, and group data. At its core, the DataSource has a store - an object that keeps data and provides an API to access and modify it. To configure the store, use the DataSource's store object. Specify its type as "array", pass the initial data array to the data field, and set the key field.

To group data, specify the data field to group by in the DataSource's group property and set the SelectBox's grouped property to true.

App.js
  • // ...
  • import DataSource from 'devextreme/data/data_source';
  •  
  • const dataSource = new DataSource({
  • store: {
  • data: data,
  • type: 'array',
  • key: 'ID'
  • },
  • group: "Category"
  • })
  •  
  • class App extends React.Component {
  • // ...
  •  
  • render() {
  • return (
  • <SelectBox ...
  • grouped={true}
  • />
  • );
  • }
  •  
  • }
  •  
  • export default App;

If your data is already grouped, ensure each group has the key and items fields as shown in this article. If the fields are named differently, implement the DataSource's map function to create key + items field mappings.

Run the code and ensure the UI component's data is grouped.

You have configured basic SelectBox features. To take a more detailed look at this UI component, explore the following resources:

Customize the Drop-Down Menu

The SelectBox uses the Popup component as the drop-down menu. To customize the menu, specify Popup properties in the dropDownOptions object. For example, the following code sets the height of SelectBox's drop-down menu to 150 pixels:

App.js
  • // ...
  • const dropDownOptions = {
  • height: 150
  • };
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <SelectBox ...
  • dropDownOptions={dropDownOptions}
  • />
  • );
  • }
  • }
  •  
  • export default App;