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
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.