1 | # Data
|
2 | `react-bootstrap-typeahead` accepts an array of either strings or objects. If you pass in objects, each one should have a string property to be used as the label for display. By default, the key is named `label`, but you can specify a different key via the `labelKey` prop. If you pass an array of strings, the `labelKey` prop will be ignored.
|
3 |
|
4 | The component will throw an error if any options are something other than a string or object with a valid `labelKey`.
|
5 |
|
6 | The following are valid data structures:
|
7 |
|
8 | ### `Array<String>`
|
9 | ```jsx
|
10 | var options = [
|
11 | 'John',
|
12 | 'Miles',
|
13 | 'Charles',
|
14 | 'Herbie',
|
15 | ];
|
16 | ```
|
17 |
|
18 | ### `Array<Object>` (w/default `labelKey`)
|
19 | ```jsx
|
20 | var options = [
|
21 | {id: 1, label: 'John'},
|
22 | {id: 2, label: 'Miles'},
|
23 | {id: 3, label: 'Charles'},
|
24 | {id: 4, label: 'Herbie'},
|
25 | ];
|
26 | ```
|
27 |
|
28 | ### `Array<Object>` (w/custom `labelKey`)
|
29 | In this case, you would need to set `labelKey="name"` on the component.
|
30 |
|
31 | ```jsx
|
32 | var options = [
|
33 | {id: 1, name: 'John'},
|
34 | {id: 2, name: 'Miles'},
|
35 | {id: 3, name: 'Charles'},
|
36 | {id: 4, name: 'Herbie'},
|
37 | ];
|
38 | ```
|
39 |
|
40 | ## Duplicate Data
|
41 | You may have unexpected results if your data contains duplicate options. For this reason, it is highly recommended that you pass in objects with unique identifiers (eg: an id) if possible.
|
42 |
|
43 | ## Data Sources
|
44 | The component simply handles rendering and selection of the data that is passed in. It is agnostic about the data source, which should be handled separately. The [`AsyncTypeahead`](API.md#asynctypeahead) component is provided to help in cases where data is being fetched asynchronously from an endpoint.
|
45 |
|
46 | [Next: Filtering](Filtering.md)
|