Select2

  • In this method, selecting only one option from a lots of options while only using up as much space as a single option excepted. For more details
  • Installation
    npm i react-select
    A Basic Select
    Script
    import Select from 'react-select'
    
    const Select2 = () => {
        const options = [
            { value: 'Alabama', label: 'Alabama' },
            { value: 'Amalapuram', label: 'Amalapuram'},
            { value: 'Arizona', label: 'Arizona' },
            { value: 'Colorada', label: 'Colorada' },
            { value: 'Idaho', label: 'Idaho' },
            { value: 'Montana', label: 'Montana' },
            { value: 'Alabama', label: 'Alabama' },
            { value: 'Anakapalli', label: 'Anakapalli' },
            { value: 'Akkayapalem', label: 'Akkayapalem' },
            { value: 'Nebraska', label: 'Nebraska' },
            { value: 'New Maxico', label: 'New Maxico' },
            { value: 'North Dakota', label: 'North Dakota' }
          ]
        return (
            <Select options={options} />
            )
        }
    A Multiple Choice
    Script
    import Select from 'react-select'
    
    const Select2 = () => {
        const options = [
            { value: 'Alabama', label: 'Alabama' },
            { value: 'Amalapuram', label: 'Amalapuram'},
            { value: 'Arizona', label: 'Arizona' },
            { value: 'Colorada', label: 'Colorada' },
            { value: 'Idaho', label: 'Idaho' },
            { value: 'Montana', label: 'Montana' },
            { value: 'Alabama', label: 'Alabama' },
            { value: 'Anakapalli', label: 'Anakapalli' },
            { value: 'Akkayapalem', label: 'Akkayapalem' },
            { value: 'Nebraska', label: 'Nebraska' },
            { value: 'New Maxico', label: 'New Maxico' },
            { value: 'North Dakota', label: 'North Dakota' }
          ]
        return (
            <Select options={options} isMulti />
            )
        }