Use ENUMS dynamically for option TAG in SELECT (REACTJS)

Question

I have ENUMS as listed below

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

How do i ensure that i can use this dynamic way as dropdown items of select tag. I searched online at several sites and didnt find a suitable answer. Can someone please help.

Currently i am hardcoding this way.

<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>

Nick · Accepted Answer · 2019-10-29 20:14:33Z

2

You can also use:

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

answered Oct 29, 2019 at 20:14

Nick

1681 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gabriel.hayes Over a year ago

I believe you need parentheses surrounding markup in JSX like that, or else you'll get a syntax error about a bad LHS argument.

Nick Over a year ago

No, in this particular case I do not

gabriel.hayes Over a year ago

I'd recommend validating your JS

gabriel.hayes · Accepted Answer · 2019-10-29 19:38:47Z

1

If it's JSX syntax you should be able to replace the mark-up inside of the element with an array of JSX elements like so:

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

answered Oct 29, 2019 at 19:38

gabriel.hayes

2,31312 silver badges15 bronze badges

1 Comment

gabriel.hayes Over a year ago

Did this solution work for you? I typically use jsx in the context of Vue.js so I'm not totally sure this will work in React

Collectives™ on Stack Overflow

Use ENUMS dynamically for option TAG in SELECT (REACTJS)

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related