# Data and Value Binding

The ComboBox enables you to configure its predefined list of options and selected value.

To set the predefined option list, use the [`data`](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops#data) property. To set the selected value, use the [`value`](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops#value) property.

## Data Binding

To bind the ComboBox to data, use the [`data`](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops#data) property of the component.

The `data` property accepts both:

* [Arrays of primitive values](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding#arrays-of-primitive-values) and
* [Datasets of objects](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding#datasets-of-objects).

### Arrays of Primitive Values

The following example demonstrates how to bind the ComboBox to an array of primitive values.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dropdowns/combobox/primitive-value/func/source.txt)

### Datasets of Objects

If the ComboBox is bound to a dataset of objects, the value of the component will correspond to the selected object. To implement the approach, set the [`textField`](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops#textfield) property.

By default, the ComboBox compares the items by reference. To specify a field from the data object which will be used for the comparison, utilize the [`dataItemKey`](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops#dataitemkey) property. The `dataItemKey` property is useful when the reference to the selected item which is configured in the `value` or `defaultValue` property do not match its corresponding item from the `data` collection. If `dataItemKey` is not set and the references in `data` and `value` do not correspond, the selected item will not be highlighted in the drop-down list.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dropdowns/combobox/complex-value/func/source.txt)

## Value Binding

To render the selected value, use the [`value`](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops#value) property of the ComboBox. If you set the value through the `value` property, hook up to the [`onChange`](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops#onchange) event and manually update the value of the `value` property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dropdowns/combobox/controlled/func/source.txt)

## Suggested Links

* [API Reference of the ComboBox](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops)
* [Controlled Components in React](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components)