React Lookup - JSON Data

Load JSON data by assigning its URL to the dataSource property.


import React from 'react';
import 'devextreme/dist/css/dx.light.css';
 
import { Lookup } from 'devextreme-react/lookup';
 
class App extends React.Component {
    render() {
        return (
            <Lookup
                dataSource="https://jsonplaceholder.typicode.com/users"
                valueExpr="username"
                displayExpr="name"
            />
        );
    }
}
 
export default App;

Note that you can also use a JSONP callback parameter.


import React from 'react';
import 'devextreme/dist/css/dx.light.css';
 
import { Lookup } from 'devextreme-react/lookup';
 
class App extends React.Component {
    render() {
        return (
            <Lookup ...
                dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"
            />
        );
    }
}
 
export default App;

Implement the CustomStore if you need to process data after obtaining it. See the Custom Sources topic for more details.

React Lookup - JSON Data

See Also