user-mapping-package/src/components/Dropdowns/CustomerDropdown.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 CustomerDropdown = ({ customers, selectedCustomerId, setSelectedCustomerId, customerId }) => {
  return (
    // <div className="w-1/4 px-2">
    //   <div id="customerDropdown" className="dx-field">
    //     <div className="dx-field-label">Customer</div>
    //     <div className="dx-field-value">
          <SelectBox
            dataSource={customers}
            displayExpr="FullName"
            valueExpr="CustomerId"
            value={customerId || selectedCustomerId}
            onValueChanged={(e) => !customerId && setSelectedCustomerId(e.value)}
            placeholder="Select Customer"
            searchEnabled={true}
            searchExpr={["FullName", "CustomerId"]}
            disabled={!!customerId}
          />
    //     </div>
    //   </div>
    // </div>
  );
};

export default CustomerDropdown;