Добавление некоторого текста рядом с параметром вact-select на основе значения

Question

Я работаю с Reaction-Select, и мне нужно добавить текст, как в изображении «категория по умолчанию», основываясь на некоторых условиях.Есть ли способ добиться этого?

Мой код:

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)}
/>

, где renderSelectField - это компонент Select, реагирующий на выбор, с использованием redux-формы, а категории - это массив объектов, содержащих идентификатор и имя..

Answer 1

Вы можете сделать это, предоставив свой собственный шаблон Option для реагирования на выбор.Работает примерно так:

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}} />

Это не подходит для вашего макета, но должно дать вам то, что вам нужно, чтобы создать свой собственный шаблон Option.