Отображение полученных объектов данных в виде выпадающего списка React Axios

Question

Я новичок, чтобы отреагировать, и я разрабатываю раскрывающееся меню, которое получает информацию от API, используя топор ios:

axios.get('/api/jobs/list-tags',{headers:headers}).then(respo =>{
      console.log(respo.data)
      this.setState({tagsList:respo.data})
    })

Это форма данных:

Object { id: 1, name: "MongoDB" }
Object { id: 2, name: "JavaScript" }

Я хочу показать эти данные в раскрывающемся списке с помощьюact-select:

<Select placeholder='Select from pre-created Tags 'onChange={handleDropDown('Tags')} defaultValue={values.Tags} required options={this.state.tagsList} />

, но при этом не отображается ни один элемент в раскрывающемся списке, а отображаются только пустые поля. Как я могу на самом деле отображать данные в строке в элементах списка? как: JavaScript, ...

Answer 1

вы можете сделать это

   <Select
  placeholder="Select from pre-created Tags "
  onChange={e => handleDropDown(e.target.value)}
  required
  value={this.state.tag}
>
  <options  value=''>Select</options>
  {this.state.tagsList.map(tags => (
    <options key={tags.id} value={tags.name}>
      {tags.name}
    </options>
  ))}
</Select>;

и функцию handleDropDown, например

  handleDropDown = tag => {
  this.setState({ tag });
};