how to iterate over an array in react-toolbox DropDown

Question

Initially i was using simple html select box in reactjs and i iterated my array coming as props in child element as

  <select onChange={this.getOccasion}>
  <option value="states">States</option>
  {
      this.props.holidays.map(function(holidays,i) {
      return <option key={i}
        value={holidays.state}>{holidays.state}</option>;
    })
  }
</select>

But i have no idea where to iterate over my array in react-toolbox Dropdown.I tried following

  <Dropdown
  auto
  onChange={this.getOccasion}
  source={this.props.holidays}
  value={this.props.holidays.state}
/>

score 1 · Answer 1 · answered Jun 28 '17 at 16:40

You need to have the dropdown source array to be in a certain format.

const countries = [
  { value: 'EN-gb', label: 'England' },
  { value: 'ES-es', label: 'Spain'},
  { value: 'TH-th', label: 'Thailand' },
  { value: 'EN-en', label: 'USA'}
];

Check RT dropdown component.

So, you could do like,

const holidays = this.props.holidays.map(holiday => ({
  value: holiday.state,
  label: holiday.state
}));

<Dropdown
  auto
  onChange={this.getOccasion}
  source={holidays}
  value={this.state.someVariable}
/>

how to iterate over an array in react-toolbox DropDown

1 Answers1