React Lookup - Array Only

Bind the Lookup to an array by passing it to the dataSource property. The array may contain primitive values...

  • 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 products = ['HD Video Player', 'SuperHD Video Player', 'SuperPlasma 50', 'SuperLED 50'];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Lookup dataSource={products}/>
  • );
  • }
  • }
  •  
  • export default App;

... or objects.

  • 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 products = [
  • { name: 'HD Video Player', price: 100 },
  • { name: 'SuperHD Video Player', price: 420 },
  • { name: 'SuperPlasma 50', price: 1500 },
  • { name: 'SuperLED 50', price: 200 }
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Lookup
  • dataSource={products}
  • valueExpr="price"
  • displayExpr="name"
  • />
  • );
  • }
  • }
  •  
  • export default App;

You can create a Query if objects in an array need to be processed (sorted, filtered, grouped, etc.). For example, in the following code, a Query sorts objects in the products array by the price field in descending order:

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Lookup } from 'devextreme-react/lookup';
  • import query from "devextreme/data/query";
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.products = [
  • { name: 'HD Video Player', price: 100 },
  • // ...
  • ];
  •  
  • this.getSortedProducts = this.getSortedProducts.bind(this);
  • }
  •  
  • getSortedProducts() {
  • return query(this.products)
  • .sortBy("price", true)
  • .toArray();
  • }
  •  
  • render() {
  • return (
  • <Lookup
  • dataSource={this.getSortedProducts()}
  • valueExpr="price"
  • displayExpr="name"
  • />
  • );
  • }
  • }
  •  
  • export default App;
See Also