---
title: "React Select Populating the picker Example | Mobiscroll"
component: "Select"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/select/data-sources"
---

# Populating the picker - React Select demo

React select component with different ways of loading the data: native html select, data objects and remote json. For React and Next.js.

- [Live demo](https://demo.mobiscroll.com/react/select/data-sources)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/pickers/select/data-sources)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/pickers/select/data-sources)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/select/data-sources.md), [jQuery](https://demo.mobiscroll.com/jquery/select/data-sources.md), [Angular](https://demo.mobiscroll.com/angular/select/data-sources.md), [Vue](https://demo.mobiscroll.com/vue/select/data-sources.md)

## Description

The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:

- **Inline HTML**, embedded in the markup - This is good if you only have a couple of static options.
- With the **`data` option** - If you want to load model data this is the way to do it. This is the way to populate the select if you want to create a [custom item template](https://demo.mobiscroll.com/react/select/item-templating).
- **Remote data** - Load it through the `data` option from a remote api/data source.

## What this demo shows

- Three single-value select examples using different data population methods.
- **Inline HTML** Embeds the select and its options directly in the markup.
- **Data object** Passes model data to the `data` option, which also supports custom item templates.
- **Remote data** Passes data loaded from a remote API or data source to the `data` option.
- **Select inputs** Opens the picker when the user focuses or clicks the associated input.
- **Input behavior** Displays the picker below the input and closes it when the user clicks outside.
- **Picker content** Presents a predefined list of options in a dropdown-style popup.
- **Hover state** Highlights an option when the user hovers over it.
- **Selection** Marks the selected option with a checkmark to indicate the current value.
- **Input value** Updates the associated input with the selected value.

## Best for

- **Small static lists** Embed a few fixed options directly in the markup with inline HTML.
- **Model-driven options** Populate the select through the `data` option when values come from application data.
- **Custom item layouts** Use the `data` option when select items need custom templates.
- **Remote datasets** Load options from a remote API or data source and pass the results to the `data` option.

## Tutorial

### Data object

Pass the items to the `data` option if you are loading from the model or in case of [item templating](https://demo.mobiscroll.com/react/select/item-templating).

```jsx
const myData = [
    { text: 'Atlanta', value: 'atl' },
    { text: 'Berlin', value: 'ber' },
    { text: 'Boston', value: 'bos' },
    { text: 'Chicago', value: 'chi' },
    { text: 'London', value: 'lon' },
    { text: 'Los Angeles', value: 'la' },
    { text: 'New York', value: 'ny' },
    { text: 'Paris', value: 'par' },
    { text: 'San Francisco', value: 'sf' }
];

<Select
    data={myData}
    touchUi={false}
/>
```

### Remote data

The data loaded from a remote source needs to be passed to the `data` option as in the previous example.

```jsx
const [remoteData, setRemoteData] = React.useState([]);
React.useEffect(() => {
    getJson('https://trial.mobiscroll.com/content/languages.json',
    (resp) => {
        setRemoteData(resp);
    });
}, []);

<Select
    data={setRemoteData}
    touchUi={false}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/select/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/select/api#opt-data) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/select/api#opt-inputStyle) - option
- [`label`](https://mobiscroll.com/docs/react/select/api#opt-label) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/select/api#opt-labelStyle) - option

## Code

### JSX

```jsx
import { getJson, Select, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [remoteData, setRemoteData] = useState([]);

  const myData = useMemo(
    () => [
      {
        text: 'Atlanta',
        value: 'atl',
      },
      {
        text: 'Berlin',
        value: 'ber',
      },
      {
        text: 'Boston',
        value: 'bos',
      },
      {
        text: 'Chicago',
        value: 'chi',
      },
      {
        text: 'London',
        value: 'lon',
      },
      {
        text: 'Los Angeles',
        value: 'la',
      },
      {
        text: 'New York',
        value: 'ny',
      },
      {
        text: 'Paris',
        value: 'par',
      },
      {
        text: 'San Francisco',
        value: 'sf',
      },
    ],
    [],
  );

  useEffect(() => {
    getJson('https://trial.mobiscroll.com/content/languages.json', (resp) => {
      setRemoteData(resp);
    });
  }, []);

  return (
    <div className="mbsc-grid mbsc-form-grid">
      <div className="mbsc-row">
        <div className="mbsc-col-sm-12 mbsc-col-md-6">
          <Select data={myData} inputStyle="outline" label="Data object" labelStyle="stacked" />
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-6">
          <Select data={remoteData} inputStyle="outline" label="Remote data" labelStyle="stacked" />
        </div>
      </div>
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { getJson, MbscSelectData, Select, setOptions } from '@mobiscroll/react';
import { FC, useEffect, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const myData = [
  {
    text: 'Atlanta',
    value: 'atl',
  },
  {
    text: 'Berlin',
    value: 'ber',
  },
  {
    text: 'Boston',
    value: 'bos',
  },
  {
    text: 'Chicago',
    value: 'chi',
  },
  {
    text: 'London',
    value: 'lon',
  },
  {
    text: 'Los Angeles',
    value: 'la',
  },
  {
    text: 'New York',
    value: 'ny',
  },
  {
    text: 'Paris',
    value: 'par',
  },
  {
    text: 'San Francisco',
    value: 'sf',
  },
];

const App: FC = () => {
  const [remoteData, setRemoteData] = useState<(string | number | MbscSelectData)[]>([]);

  useEffect(() => {
    getJson('https://trial.mobiscroll.com/content/languages.json', (resp) => {
      setRemoteData(resp);
    });
  }, []);

  return (
    <div className="mbsc-grid mbsc-form-grid">
      <div className="mbsc-row">
        <div className="mbsc-col-sm-12 mbsc-col-md-6">
          <Select data={myData} inputStyle="outline" label="Data object" labelStyle="stacked" />
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-6">
          <Select data={remoteData} inputStyle="outline" label="Remote data" labelStyle="stacked" />
        </div>
      </div>
    </div>
  );
};
export default App;
```

## Implementation notes

- **Inline HTML** works only for JS/jQuery: a native `<select>` with `<option value="...">Text</option>` children is passed to `mobiscroll.select('#id', {...})` / `$('#id').mobiscroll().select({...})` as-is, with no `data` option needed. React, Angular, and Vue always populate options through the `data` option/prop - there is no inline-markup path for those frameworks.
- **Data object** populates the picker from an array of `{ text, value }` objects passed to `data` (JS/jQuery `data: [...]` in `.select({...})`; React `data={myData}` prop on `<Select>`; Angular `[data]="myData"` binding with `myData` defined on the component; Vue `:data="myData"` binding with `myData` defined in `<script setup>`).
- **Remote data** loads the same `{ text, value }` shape asynchronously and assigns it after the initial render/init rather than at construction time:
  - JS/jQuery: get the instance via `.mobiscroll('getInst')` (or the return value of `mobiscroll.select(...)`), fetch with `mobiscroll.getJson(url, callback, 'jsonp')` / `$.getJSON(url, callback, 'jsonp')`, then call `inst.setOptions({ data: resp })` in the callback.
  - React: fetch inside a `useEffect` and store the response in state (`useState([])`), then bind `data={remoteData}` - the picker re-renders once the state updates.
  - Angular: fetch in `ngOnInit` via `this.http.get(url).subscribe(...)`, assign the response to a component property, and bind `[data]="remoteData"`.
  - Vue: fetch in `onMounted` and assign the response to a `ref([])`, bound as `:data="remoteData"`.
- `inputElement` points the picker at a separate `<input>` element (rather than the `<select>`/component itself) so the popup opens when that input is focused/clicked and shows the selected value there.
- The example data uses string `value`s (e.g. `'atl'`, `'ber'`); `text` is the label shown in the option list and, once selected, in the bound input.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Understanding display modes](https://demo.mobiscroll.com/react/select/mobile-desktop-display.md) - React select/dropdown for mobile and desktop with top, bottom, popup, center, modal, anchored positioning.