Как передать реквизиты от дочернего к map () в родительском компоненте?

Question

У меня есть дочерний компонент, который представляет простой. Моя идея состоит в том, чтобы передать некоторые извлеченные данные его родительскому компоненту. У меня есть состояние, подобное этому: state: { countries: [] }, и я получил данные для него в componentDidMount(). state.countries заполнено некоторыми значениями id и countryName. Когда я пишу такой код

   <select
      name="country"
      defaultValue="country"
      onChange={this.onChangeHandler}
    >
      <option disabled value="country">
        Select country
      </option>
      {countries.map(({ id, countryName }) => (
        <option key={id} value={id}>
          {countryName}
        </option>
      ))}
    </select>

работает отлично. Но когда я пытаюсь передать атрибуты через реквизит, как это:

<Select 
          name="country"
          defaultValue="country"
          onChange={this.onChangeHandler}
          defaultOption="Select Country"
          apiResult={countries}
          dataId={countries.id}
          dataName={countries.countryName}
          disabled="disabled"
        />

не получается. Родительский компонент выглядит так:

const { name, label, onChange, defaultValues, apiResult, defaultOption, dataId, dataName, disabled } = props;
<select name={name} value={defaultValues} onChange={onChange} id="">
    <option disabled={disabled} value={defaultOption}>{defaultOption}</option>
    {apiResult.map(() => (
      <option key={dataId} value={dataId}>
        {dataName}
      </option>
    ))}
  </select>

Что я делаю не так? Заранее спасибо!

Answer 1

.map метод должен использоваться по-другому.В качестве первого аргумента вы получаете текущий элемент последовательности.Итак:

<select name={name} value={defaultValues} onChange={onChange} id="">
    <option disabled={disabled} value={defaultOption}>{defaultOption}</option>
   {apiResult.map((apiItem) => (
     <option key={apiItem.key} value={apiItem.id}>
       {dataName}
     </option>
   ))}
  </select>

Таким образом, вы можете вызывать компонент следующим образом:

<Select 
      name="country"
      defaultValue="country"
      onChange={this.onChangeHandler}
      defaultOption="Select Country"
      apiResult={countries}
      disabled="disabled"
    />

dataId={countries.id} и dataName={countries.countryName} не имеет смысла, если countries является массивом.