Блог

Компонент react-select требует, чтобы входные параметры были в этой структуре

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

Реквизиты, которые я передаю этому пользовательскому компоненту, имеют такую структуру.

 members :[
    {
      MemberName: "name of person"
      other fields
    },
    {
      MemberName: "name of person"
      other fields
    }
 ]
 

Массив элементов будет динамическим, поступающим из родительского компонента.

Я пытаюсь создать свой ввод для элемента react-select, который, по моему мнению, в конце должен выглядеть следующим образом

 const options = [
    { value: 'Member 1 Name', label: 'Member 1 Name' },
    { value: 'Member 2 Name', label: 'Member 2 Name' },
    ...as many members as the props has
  ]
 

До сих пор я пробовал также Map, forEach, reduce и simple для цикла. Но я изо всех сил пытаюсь это изменить.

Карта-это правильный путь.

Попробуйте это:

 let options = members.map(member => ({
  label: member.MemberName,
  value: member.something
}))
 

Непонятно, откуда берутся ваши другие ценности. В ваших образцах не используются одни и те же строки, что делает невозможным для нас вывод о том, какая связь существует между исходными данными и желаемым результатом.

Если правильная строка для value существует как есть для этих объектов-членов, то вы можете просто скопировать ее, как я это сделал MemberName . Если правильное значение должно быть рассчитано на основе реквизитов элемента, вам придется написать эту логику преобразования. ТАК что вы могли бы это сделать, но вам нужно будет обновить свой вопрос, чтобы использовать согласованные значения во всех ваших образцах.