React Lookup - ArrayStore

Extend a JavaScript array's functionality by placing it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.


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 ArrayStore from "devextreme/data/array_store";
 
const products = [/* ... */ ];
 
class App extends React.Component {
    constructor(props) {
        super(props);
 
        this.dataSource = new ArrayStore({
            data: products,
            onLoaded: function () {
                // Event handling commands go here
            }
        });
    }
 
    render() {
        return (
            <Lookup
                dataSource={this.dataSource}
                valueExpr="price"
                displayExpr="name"
            />
        );
    }
}
 
export default App;

Data kept in the ArrayStore can be processed in a DataSource. For example, the DataSource can sort data.


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 DataSource from "devextreme/data/data_source";
 
const products = [/* ... */ ];
 
class App extends React.Component {
    constructor(props) {
        super(props);
 
        this.dataSource = new DataSource({
            store: products,
            sort: { getter: "name", desc: true }
        });
    }
 
    render() {
        return (
            <Lookup
                dataSource={this.dataSource}
                valueExpr="price"
                displayExpr="name"
            />
        );
    }
}
 
export default App;

NOTE

Even if you have passed a JavaScript array to the dataSource property, the Lookup automatically places it into an ArrayStore wrapped into the DataSource you can get with the getDataSource() method.

React Lookup - ArrayStore

See Also