Native Select

An abstraction over a <select> element, with inner <option> elements.

Instead of adding explicit markup, we define options and provide them to NativeSelect (through the data prop):

<NativeSelect data={data} />

For each option, we provide a label and a value:

const data = [
    { label: "Death Knight", value: "deathKnight" },
    { label: "Demon Hunter", value: "demonHunter" },
]

(fallback) use the value as a label

If the value can work as a label, or if we want to surface the value directly in the UI, we can provide an array of raw strings. The strings are used both as values and labels:

const data = ["deathKnight", "demonHunter"]