user-mapping-package/src/components/Dropdowns/SubclientDropdown.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 SubclientDropdown = ({ subclients, selectedSubclientId, setSelectedSubclientId, selectedProjectId, subclientId, showSubclient }) => {
  if (!showSubclient) return null;

  return (
    // <div className="w-1/4 px-2">
    //   <div id="subclientDropdown" className="dx-field">
    //     <div className="dx-field-label">Subclient</div>
    //     <div className="dx-field-value">
          <SelectBox
            dataSource={subclients}
            displayExpr="SubclientName"
            valueExpr="SubclientId"
            value={subclientId || selectedSubclientId}
            onValueChanged={(e) => !subclientId && setSelectedSubclientId(e.value)}
            placeholder="Select Sub Client"
            disabled={!selectedProjectId || !!subclientId}
            searchEnabled={true}
            searchExpr={["SubclientName", "SubclientId"]}
          />
    //     </div>
    //   </div>
    // </div>
  );
};

export default SubclientDropdown;