Почему не отображаются элементы списка?

Question

[jIVOYz]

У меня есть выпадающий список <select>, там должно отображаться два элемента <option>, после первого который по умолчанию отключен.

Вот такая запись в файле App.js:

<MySelect
          value={selectedSort}
          defaultValue="Сортировка"
          options={[
            {value: 'title', name: 'По названию'},
            {value: 'body', name: 'По описанию'},
          ]}
        />

Вот сам компонент который я добавил в App.js:

import React from 'react'

export const MySelect = ({options, defaultValue, value, onChange}) => {
  return (
    <select 
      value={value}
      onChange={event => onChange(event.target.value)}
    >
      <option disabled value="">{defaultValue}</option>
      {options.map(option => {
        <option key={option.value} value={option.value}>
          {option.name}
        </option>  
      })}
    </select>
  )
}
export default MySelect

Я изучаю React только два или три дня, по курсу Ulbi TV на ютубе, так что возможно я где-то допустил ошибку, хотя на самом видео и у меня в редакторе вроде одинаковый код.

Answer 1

[Александр]

Ошибка в методе .map - Вы ничего не возвращаете.

{options.map(option => {
  return (
    <option key={option.value} value={option.value}>
      {option.name}
    </option>
  );
})}

либо

{options.map(option => (
  <option key={option.value} value={option.value}>
    {option.name}
  </option>
))}

Comments

[jIVOYz]

Спасибо