@progress/kendo-layout-react-wrapper/docs/tabstrip/data-binding.md

Kendo UI Layout wrapper for React

---
title: Data Binding
page_title: Data Binding - TabStrip - Kendo UI Wrappers for React
description: "Instantiate and set the configuration options for the Kendo UI TabStrip wrapper for React."
slug: data_binding_tabstrip
position: 2
---

# Data Binding

The TabStrip provides support for binding it to local data arrays.

Local data arrays are appropriate for limited value options. To bind the TabStrip to local data, use the [Kendo UI Data Source component](https://docs.telerik.com/kendo-ui/framework/datasource/overview).

```jsx-preview
	class LayoutsContainer extends React.Component {

	  render() {
	    return (
          <div className="example-wrapper">
            <p> TabStrip </p>
            <TabStrip value="Tab1"
                dataTextField="Name" dataContentField="Content"
                dataSource = {new kendo.data.DataSource({                
                    data:
                    [{ Name: "Tab1", Content: "Tab1: content" },
                    { Name: "Tab2", Content: "Tab2: content" }
                    ]})
                    }
                >
            </TabStrip>   
          </div>
	    );
	  }
	}
	ReactDOM.render(
	  <LayoutsContainer />,
	  document.querySelector('my-app')
	);
```

## Suggested Links

* [Kendo UI Data Source Component](https://docs.telerik.com/kendo-ui/framework/datasource/overview)
* [Kendo UI TabStrip for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/overview)
* [API Reference of the TabStrip Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip)