React Lookup - Overview
The Lookup is a UI component that allows an end user to search for an item in a collection shown in a drop-down menu.
The following code adds the Lookup UI component to your page. The simplest configuration requires only a dataSource to be specified. In addition, you can define the placeholder to be displayed when the Lookup input field is empty.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { Lookup } from 'devextreme-react/lookup';
- const dataSource = [
- 'HD Video Player',
- 'SuperHD Video Player',
- 'SuperPlasma 50',
- // ...
- ];
- class App extends React.Component {
- render() {
- return (
- <Lookup
- dataSource={dataSource}
- 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 property. - displayExpr
The data field whose value will be displayed within the inner List UI component and in the input field of the Lookup.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { Lookup } from 'devextreme-react/lookup';
- const lookupData = [
- { id: 1, country: 'Afghanistan' },
- { id: 2, country: 'Albania' },
- // ...
- ];
- class App extends React.Component {
- render() {
- return (
- <Lookup
- dataSource={lookupData}
- valueExpr="id"
- displayExpr="country"
- />
- );
- }
- }
- export default App;
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Lookup - Configure Search Parameters
- Lookup - Enable Grouping
- Lookup - Enable Paging
- Lookup - Customize the Appearance
- Lookup - Handle the Value Change Event
- Lookup API Reference
- Lookup vs SelectBox
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.