ReactJS – How to create a select box?

Use react-select

import React from 'react'
import Select, { components } from 'react-select'

interface Props {
  placeHolder: string,
  options: Array<any>,
}

const SelectBox: React.FC<Props> = ({ placeHolder, options }) => {

  // Change dropdown icon
  const CustomDropdownIndicator = (props: any) => {
    return (
      <components.DropdownIndicator {...props}>
        <Icon
          type={`dropdown`}
        />
      </components.DropdownIndicator>
    )
  }

  return (
    <Select
      components={{
        DropdownIndicator: CustomDropdownIndicator,  // Change dropdown icon
        IndicatorSeparator: () => null,  // Hide indicator separator
      }}
      styles={customStyles}
      options={options}
      placeholder={placeHolder}
    />
  )
}

const customStyles = {
  // Style for selectbox
  control: (provided: any) => ({
    ...provided,
    width: '100%',
    height: '48px',
    paddingLeft: '7px',
    border: '1px solid #DEDEDE',
    fontSize: '14px',
    color: '#333333',
  }),
  // Style for placeholder
  placeholder: (defaultStyles: any) => {
    return {
      ...defaultStyles,
      color: '#999999',
    }
  },
  // Style for item list
  option: (provided: any, state: { isSelected: any }) => ({
    ...provided,
    color: '#333333',
  }),
}

export default SelectBox