A newer version of this page is available.

DevExtreme React - Overview

The SelectBox widget is an editor that allows an end user to select an item from a drop-down list.

The following code adds the SelectBox to your page. The simplest configuration of the widget requires only a dataSource to be specified. In addition, you can specify the placeholder to be displayed when the SelectBox is empty.

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';
 
const products = [
    "HD Video Player",
    "SuperHD Video Player",
    "SuperPlasma 50",
    // ...
]; 
 
class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={products}
                placeholder="Select a product..."
            />
        );
    }
}
export default App;

If your data is an array of objects, specify:

valueExpr
The data field whose value will be written into the value option.
displayExpr
The data field whose value will be displayed in the drop-down list and in the input field of the widget.

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';
 
const selectBoxData = [
    { id: 1, country: "Afghanistan" },
    { id: 2, country: "Albania" },
    // ...
];
 
class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxData} 
                displayExpr="country"
                valueExpr="id"
            />
        );
    }
}
export default App;

DevExtreme React - Overview

See Also