CODEWITHSUNDEEP
react-select
nope
nope

Reputation: 771

Creating a Custom Component on React-Select

I am trying to create a custom component for React-Select, where I want to show more than just label in the select box. Kind of similar to Custom Placeholder, Option, Value, and Arrow Components part here. The problem is that the link to the source code is not accessible anymore, and I found the documentation for styling pretty awful.

Assume I have my data like this:

[
  {
    'id': 1,
    'label': 'Alpha',
    'gender': 'Male'
    'country': 'USA'
  },
  {
    'id': 2,
    'label': 'Beta',
    'gender': 'Male'
    'country': 'ENG'
  },
  {
    'id': 3,
    'label': 'Charlie',
    'gender': 'Female'
    'country': 'GER'
  }
]

What I want to show in select box is something like:

Alpha - Male - USA

Beta - Male - ENG

Charlie - Female - GER

But it should still filter only for labels, which are Alpha, Beta, and Charlie.

Right now I can only show Alpha, Beta, and Charlie. I am trying to understand how to do this from the documentation here but for example there are no definitions for style keys and what they do. I could use some guidance here.

Upvotes: 1

Views: 602

Answers (1)

Steve -Cutter- Blades
Steve -Cutter- Blades

Reputation: 5432

Use the getOptionLabel prop on your Select:

const label = (option) => `${option.label} - ${option.gender} - ${option.country}`;

<Select getOptionLabel={label} />

Upvotes: 1

Related Questions