Как создать список тегов параметров из файла JSON в ReactJS

Question

Я очень новичок в ReactJS и играюсь с формами.В частности, я пытаюсь создать список тегов <option> на основе записей в (локальном) файле JSON.

Проходя по отладчику, я вижу, что значения читаются и анализируются правильно.Пока что на отображаемой странице ничего не появляется, и я не совсем уверен, почему.

Вот компонент, который я написал:

import React, { Component } from 'react';

const countries = require('../Data/countries.json')

class Countries extends Component {
  constructor(props) {
    super(props);
    this.state = {
      countries: countries,
    }
  };

  render() {
    return (
      <div className="Countries">
        <select name={this.props.name}>
        {
          Object.entries(this.state.countries).forEach((entry, _) => {
            let key = entry[0]
            let value = entry[1]
            return <option value={key}>{value}</option>
          })
        }
        </select>
      </div>
    );
  }
}

export default Countries;

Файл JSON взят из https://raw.githubusercontent.com/umpirsky/country-list/master/data/en_GB/country.json. Итак, записи похожи на "CC": "Country name".

В основном App.js я создаю Countries вот так:

<Countries name="country" />

Я не вижу ничего очевидного в том, что яотсутствует.Что это?

Answer 1

Array#forEach не имеет возвращаемого значения, а return внутри обратного вызова ничего не делает

Вместо Array#map()

 <select name={this.props.name}>
    {
      Object.entries(this.state.countries).map((entry, _) => {
        let key = entry[0]
        let value = entry[1]
        return <option value={key}>{value}</option>
      })
    }
 </select>

Или с помощью Object.keys ()

 <select name={this.props.name}>
    {
      Object.keys(this.state.countries).map(key => {           
        return <option value={key}>{this.state.countries[key]}</option>
      })
    }
 </select>