DialectSelector = function DialectSelector(props) {
    const {connectionObject, updateConnection} = props;

    // react-select requires options to have `label` and `value` keys
    const DIALECT_OPTIONS = Object.entries(DIALECTS).map(DIALECT => ({
      label: DIALECT[1],
      value: DIALECT[0]
    }));

    const placeholder = <span>Select a database type...</span>;

    const onChange = ({ label }) => updateConnection({dialect: label});

    const currentValue = DIALECT_OPTIONS.filter(DIALECT =>
      DIALECT.label === connectionObject.dialect)[0];

    return (
      <div>
          <label className={'label'}>Database Type</label>
          <div className={'wrapInput'}>
            <Select
              searchable={false}
              clearable={false}
              onChange={onChange}
              optionComponent={DialectOption}
              options={DIALECT_OPTIONS}
              placeholder={placeholder}
              value={currentValue}
              valueComponent={DialectValue}
            />
          </div>
      </div>
    );
}
The following is the Dialect Selector
@param {object} props - Properties
@param {object} props.connectionObject - Connect Object
@param {string} props.connectionObject.dialect - Dialect
@param {function} props.updateConnection - Updates the Connection with dialect
@returns {ReactElement} rendered element