edx-platform/lms/static/js/demographics_collection/SelectWithInput.jsx

import React from 'react';

export const SelectWithInput = (props) => {
    const {
        selectName,
        selectId,
        selectValue,
        options,
        inputName,
        inputId,
        inputType,
        inputValue,
        selectOnChange,
        inputOnChange,
        showInput,
        inputOnBlur,
        labelText,
        disabled,
    } = props;
    return (
        <div className="d-flex flex-column pb-3">
            <label htmlFor={selectName}>{labelText}</label>
            <select
                autoFocus
                className="form-control"
                name={selectName}
                id={selectId}
                onChange={selectOnChange}
                value={selectValue}
                disabled={disabled}
            >
                {options}
            </select>
            {showInput
        && (
            <input
                className="form-control"
                aria-label={`${selectName} description field`}
                type={inputType}
                name={inputName}
                id={inputId}
                onChange={inputOnChange}
                onBlur={inputOnBlur}
                value={inputValue}
                disabled={disabled}
                maxLength={255}
            />
        )}
        </div>
    );
};