Используйте ENUMS динамически для опции TAG в SELECT (REACTJS)

Question

У меня есть ENUMS, как указано ниже

export declare enum UserStatus {
    NEW = "NEW",
    REGISTERED = "REGISTERED"
}

Как мне убедиться, что я могу использовать этот динамический способ в качестве выпадающих элементов тега select. Я искал онлайн на нескольких сайтах и ​​не нашел подходящего ответа. Может кто-нибудь, пожалуйста, помогите.

В настоящее время я жестко программирую этот путь.

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
      <option
        aria-selected="true"
        key={UserStatus.NEW}
        value={UserStatus.NEW}
      >
        {UserStatus.NEW}
      </option>
      <option
        aria-selected="true"
        key={UserStatus.REGISTERED}
        value={UserStatus.REGISTERED}
      >
        {UserStatus.REGISTERED}
      </option>
    </select>

Answer 1

Вы также можете использовать:

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
    Object.values(UserStatus).map(value =>
        <option
            aria-selected="true"
            key={value]}
            value={value}
        >
            {value}
        </option>
    )
</select>

Answer 2

Если это синтаксис JSX, вы можете заменить разметку внутри элемента на массив элементов JSX, например:

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
    Object.keys(UserStatus).map(key => (
        <option
            aria-selected="true"
            key={UserStatus[key]}
            value={UserStatus[key]}
        >
            {UserStatus[key]}
        </option>
        )
    )
</select>