Creating a Custom Component on React-Select

Question

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.

Steve -Cutter- Blades · Accepted Answer · 2018-10-12 15:26:05Z

1

Use the getOptionLabel prop on your Select:

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

<Select getOptionLabel={label} />

answered Oct 12, 2018 at 15:26

Steve -Cutter- Blades

5,4623 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

only_one Over a year ago

Hm, really usefull, I prefer to use components and then manipulate options, but it works too :) Best regards!

Collectives™ on Stack Overflow

Creating a Custom Component on React-Select

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related