user-mapping-package/src/components/Dropdowns/RoleDropdown.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

import { SelectBox } from 'devextreme-react/select-box';
import "devextreme/dist/css/dx.light.css";

const RoleDropdown = ({ roles, selectedRoleId, setSelectedRoleId }) => {
  return (
    // <div className="w-1/4 px-2">
    //   <div id="roleDropdown" className="dx-field">
    //     <div className="dx-field-label">Role</div>
    //     <div className="dx-field-value">
          <SelectBox
            dataSource={roles}
            displayExpr="RoleName"
            valueExpr="RoleId"
            value={selectedRoleId}
            onValueChanged={(e) => setSelectedRoleId(e.value)}
            placeholder="Select Role"
            searchEnabled={true}
            searchExpr={["RoleName", "RoleId"]}
          />
    //     </div>
    //   </div>
    // </div>
  );
};

export default RoleDropdown;