set option label of selected value in React

Question

Using React I want to set a defaulvalue for my select and diplay the label in the options. This is what I've built so far :

<Select showSearch style = {{ width: '100%' }}
                   placeholder = "Selection la choix de votre numéro de téléphone "
                   optionFilterProp = "children"
                   onChange = {handleChangeSelect}

                   defaultValue = {extraitMP3[ids].Mp3[idJson].visibilite}
                   onFocus = {handleFocusSelect}
                   onBlur = {handleBlurSelect}
                   filterOption = {(input, Option) => Option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>

    <Option value = "1"> Visible dans la recherche et sur ma fiche </Option>
    <Option value = "2"> Visible sur ma fiche uniquement </Option>
    <Option value = "3"> Masqué </Option>
</Select>

The result now is showing {extraitMP3[ids].Mp3[idJson].visibilite} which is equal to one of the option values but what I want to display is the option labels. Any help to change what to display from values to their labels in the defaulValue

Answer 1

You could store the options in a Map, and then look up the text for the option:

Somewhere in your component's module but not in the component itself (no need to recreate it all the time):

const selectOptions = new Map([
    ["1", "Visible dans la recherche et sur ma fiche"],
    ["2", "Visible sur ma fiche uniquement"],
    ["3", "Masqué"],
]);

Then when rendering, look it up:

defaultValue={selectOptions.get(extraitMP3[ids].Mp3[idJson].visibilite)}

also, use the map for rendering the options. So the rendering code would look something like:

<Select
            showSearch
            style={{ width: '100%' }}
            placeholder="Selection la choix de votre numéro de téléphone "
            optionFilterProp="children"
            onChange={handleChangeSelect}

            defaultValue={selectOptions.get(extraitMP3[ids].Mp3[idJson].visibilite)}
            onFocus={handleFocusSelect}
            onBlur={handleBlurSelect}
            filterOption={(input, Option) => Option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
          {[...selectOptions].map(([value, label]) => <Option value="{value}"> {label} </Option>)}
</Select>