user-mapping-package/src/components/Dropdowns/ProjectDropdown.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 ProjectDropdown = ({ projects, selectedProjectId, setSelectedProjectId, selectedCustomerId, projectId }) => {
  return (
    // <div className="w-1/4 px-2">
    //   <div id="projectDropdown" className="dx-field">
    //     <div className="dx-field-label">Project</div>
    //     <div className="dx-field-value">
          <SelectBox
            dataSource={projects}
            displayExpr="ProjectDisplayName"
            valueExpr="ProjectId"
            value={projectId || selectedProjectId}
            onValueChanged={(e) => !projectId && setSelectedProjectId(e.value)}
            placeholder="Select Project"
            disabled={!selectedCustomerId || !!projectId}
            searchEnabled={true}
            searchExpr={["ProjectDisplayName", "ProjectId"]}
          />
    //     </div>
    //   </div>
    // </div>
  );
};

export default ProjectDropdown;