Data Binding

The Menu enables you to bind it to local arrays of data or to remote data.

Binding to Local Data

The following example demonstrates how to bind the Menu to local data arrays.

class App extends React.Component {
       render() {
           let items = [
               { text: "First item" },
               { text: "Second item", items: [{ text: "Second item child item" }] }
           ];

           return (
               <Menu items={items} />
           );
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

Binding to Remote Data

The following example demonstrates how to bind the Menu to remote data.

import React from 'react';
import ReactDOM from 'react-dom';
import { Menu } from '@progress/kendo-react-layout';

class App extends React.Component {
    url = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/Categories?$expand=Products';

    constructor(props) {
        super(props);

        this.state = { items: [] };
    }

    render() {
        return (
            <div>
                <Menu items={this.state.items} />
            </div>
        );
    }

    componentDidMount() {
        fetch(this.url)
            .then(response => response.json())
            .then(json => {
                this.setState({ items: mapItems(json.value) });
            });
    }
}

// convert the received data to menu items.
function mapItems(items) {
    return items.map(item => {
        const result = { text: item.CategoryName };

        // convert the children data to menu items.
        if (item.Products) {
            result.items = item.Products.map(childItem => { return { text: childItem.ProductName }; });
        }

        return result;
    });
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article