CODEWITHSUNDEEP
reactjsdropdown
Zokulko
Zokulko

Reputation: 229

How can I generate number from 0 to 100 using 'react-select'?

I'm using react and how can I create a dropdown that display number from 0 to 100% ?

My Dropdown:

import React, { useState } from 'react'
import Select from 'react-select';
import Tag from './Tag'

export default function Dropdown({ className, options, styleSelect, defaultValue}) {
    const [selected, setSelected] = useState(defaultValue);     

    return (
        <>
            {selected ?
                <Tag selected={selected} setSelected={setSelected} styleSelect={styleSelect} />
                :
                <Select className={className} value={selected} onChange={setSelected} options={options}/>
            }
        </>
    )
}

If it wasn't so long I would do :

const PERCENTAGE = [
        { label: '0', value: '0' },
        ...
    ]

and do <CustomDropdown options={PERCENTAGE}/>

Or I was thinking of using jquery but it's not working

Upvotes: 0

Views: 2868

Answers (1)

himayan
himayan

Reputation: 842

You can achieve the PERCENTAGE array by mapping an array of 101 elements like -

const PERCENTAGES = [...new Array(101)]
  .map((each, index) => ({ label: index, value: index });

However, this would be poor UX. You can probably try <input type="range">, if you haven't explored already.

EDIT -

If you need to generate one with a gap of 20, then you can create an array of 6 and map them by multiplying a factor of 20 -

const PERCENTAGES = [...new Array(6)]
   .map((each, index) => {
      const value = index * 20;
      return ({
        label: value,
        value,
      })
   });

Upvotes: 3

Related Questions