select.js

/* eslint-disable jsx-a11y/label-has-for */
import React from 'react';
import { capitalizeFirstLetters } from 'Utils';

type Props = {
  name: string,
  label: string,
  options: Object,
  idKey: string,
  nameKey: string,
  cfl: Boolean,
  all: Boolean,
};

const Select = ({ name, label, options = [], idKey, nameKey, cfl, all, ...rest }: Props) => {
  return (
    <React.Fragment>
      <div>
        <label htmlFor={name}>{label}: </label>
        <select name={name} id={name} {...rest}>
          {all && (
            <>
              <option key={21} value="all">
                All
              </option>
              <option disabled>___________________</option>
            </>
          )}
          {options.map(option => (
            <option key={option[idKey]} value={option[idKey]}>
              {cfl ? capitalizeFirstLetters(option[nameKey]) : option[nameKey]}
            </option>
          ))}
        </select>
      </div>
    </React.Fragment>
  );
};

           <Select
              name="user_role"
              // value="Navi"
              label="Type"
              options={USER_ROLES}
              // onChange={this.handleChange}
              idKey="role"
              nameKey="name"
              all
            />

export default Select;