ReactJS: заполнение опций выбора из вызова API

Question

У меня есть этот вызов API, который возвращает типы покемонов, как в:

["Grass", "Poison", "Fire", "Flying", "Water", "Bug", "Normal", "Electric", "Ground", "Fighting", "Psychic", "Rock", "Ice", "Ghost", "Dragon"]

, который является результатом функции, которая принимает все значения покемонов и отфильтровывает дубликаты и тому подобное. Эта же функция используется для получения этих значений и заполнения опций выбора:

  let pokemonSingleType = (() => {
    let types = pokemonData.reduce((acc, { type }) => (acc.push(...type), acc), [])
    types = new Set(types);
    types = [...types];
    console.log(types);
    return <option>
      {types}
    </option>
  })();

Это отображается ниже:

 <select value={searchType} onChange={updateSearchByType.bind(this)} 
  className="formcontrol" id="typeSelect">
  {pokemonSingleType}
</select>

, но проблема в том, что я получаю весь массив как один Выберите значение параметра. Пожалуйста, см. Изображение ниже:

Вывод, как показано ниже:

Кроме того, когда я делаю для l oop до , останавливается на первой итерации:

let pokemonSingleType = (() => {
    let types = pokemonData.reduce((acc, { type }) => (acc.push(...type), acc), [])
    types = new Set(types);
    types = [...types];
    for(let i =0; i< types.length; i++){
      return <option>
      {types[i]}
    </option>
    }

  })();

Answer 1

Теги

<option> должны быть размещены вокруг каждого элемента, а не всех. map - самый прямой путь к достижению sh this:

const Dropdown = ({options}) =>
  <select>
    {options.map((e, i) => <option key={i}>{e}</option>)}
  </select>
;

const pokemon = ["Grass", "Poison", "Fire", "Flying", "Water", "Bug", "Normal", "Electric", "Ground", "Fighting", "Psychic", "Rock", "Ice", "Ghost", "Dragon"];
ReactDOM.render(<Dropdown options={pokemon} />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Во втором примере return внутри l oop вернет только первый элемент. Вы можете поместить sh элементов JSX в массив и вернуть его, но это все еще выглядит как косвенное указание.

В обоих примерах использование reduce для распределения каждого элемента в массиве в массив аккумулятор является антипаттерном; map делает это лучше всего.