Adding some text next to an option in react-select based on the value

Question

I am working with react-select and need to add the text as in the image 'default category' based on some condition. Any way to achieve this?

My code:

renderCategories(categories) {
   const temp = [];
   categories.forEach((key) => {
        temp.push({label: key.name, value: key.id.toString()});
   });
   return temp;
}

<Field
 name="event_category"
 component={renderSelectField}
 placeholder="Select Event Category"
 options={this.renderCategories(categories)}
/>

where renderSelectField is the Select component of react-select, using redux-form and categories is an array of objects containing id and name.

Possible duplicate of How can I use react-select to custom render subtext below each dropdown item? — Laura
– Laura, Commented Feb 26, 2019 at 15:24

Steve -Cutter- Blades · Accepted Answer · 2019-02-26 15:21:58Z

2

You can do this by providing your own custom Option template to react-select. Works a little like:

const OptionLayout = props => {
  const { innerProps, innerRef } = props;
  return (
    <article ref={innerRef} {...innerProps} className={'custom-option'}>
      <h4>{props.data.artist}</h4>
      <div className={'sub'}>{props.data.title} </div>
    </article>
  );
};

<Select {...selectProps} components={{Option: OptionLayout}} />

That's not a match for your layout, but should give you what you need to create your own custom Option template.

answered Feb 26, 2019 at 15:21

Steve -Cutter- Blades

5,4623 gold badges30 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Adding some text next to an option in react-select based on the value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related