How to implement Drop down in React JS using Array for the below snippet of code

Question

<Select onChange={(e) => setValue(e.target.value)} value={value} labelText="Year">
   <Select.Option value="Last 18 Months">2020</Select.Option>
   <Select.Option value="Last 12 Months">2019</Select.Option>
   <Select.Option value="Last 6 Months">2018</Select.Option>
   <Select.Option value="Last Month">2017</Select.Option>
</Select>

How to implement Drop down in React JS using Array for the given snippet of code

Answer 1

If I understood you correctly:

const values = [
  {
    value: 'Last 18 Months',
    title: '2020'
  },
  {
    value: 'Last 12 Months',
    title: '2019'
  },
  {
    value: 'Last 6 Months',
    title: '2018'
  },
  {
    value: 'Last Month',
    title: '2017'
  }
]

<Select 
  onChange={(e) => setValue(e.target.value)} 
  value={value} 
  labelText="Year"
>
  {values.map(({ value, title }) => (
    <Select.Option key={value} value={value}>
      {title}
    </Select.Option>
  ))}
</Select>