React-Select not showing options

user_6477047 0
Viewed 7612

I'm trying to implement react-select in my form, but the options are not showing up. If I inspect the select component the options prop is filled, but the options aren't being displayed.

I've tried both an array of strings and an array of objects. Neither displays the info in the dropdown, even though both show up in the options props.

const systems = [
"SystemName/12345/1",
"SytemName1/7890/2",
"SystemName2/65432/3"
]

I've also tried:

const systems = 
[{systemName: 'SystemName1", altId:12345, systemId: 1},
{systemName: 'SystemName2", altId:7890, systemId: 2},
{systemName: 'SystemName3", altId:65432, systemId: 3}]

 <form className="page-form" onSubmit={handleSubmit(this.onSubmit)}>
                    <Row>
                        <Col>
                            <Label label="Water System" htmlFor="systemId" required />
                            <Select
                                options={systems}
                                isSearchable={true}
                                name="systemId"
                                value="systemId"
                                placeholder="Select System"
                            />
....
</form>

enter image description here

react-select reactjs
2 Answers

Make sure your options are of the right type - example from the docs

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

Must be of type Array<{value:string,label:string}>

user_76450690

In react-select v1

<Select
   labelKey=labelKey
   valueKey=valueKey
/>

In react-select v2 onwards

<Select
   getOptionLabel={options => options[labelKey]}
   getOptionValue={options => options[valueKey]}
/>

Ex:

/* React-Select v2 */

import React, { Component } from "react";
import Select from "react-select";

/* Here name is the labelKey and id is the valueKey */

const options = [
  { id: 'value1', name: 'label1'},
  { id: 'value2', name: 'label2'},
  { id: 'value3', name: 'label3'},
]

export default class ReactSingleSelect extends Component {
  render() {
    //suppose you want name as label and id as value
    return (
      <Select
        options={options}
        getOptionLabel={(options) => options['name']}
        getOptionValue={(options) => options['id']}
      />
    );
  }
}
user_91274030
Related