Entonces necesito mostrar "Sí" o "No" en el menú desplegable, pero pasar "administrador" o "miembro" a la API. En este momento lo estoy haciendo a través del operador ternario, verificando e.target.value o también verifiqué el "rol" de estado cuando lo pasé a la solicitud de API, y funcionó. Pero, ¿hay alguna otra forma más agradable y más confiable?

 export function EditableRole({ employee, onSave, onCancel, }: EditableRoleProps) { const [role, setRole] = useState("MEMBER"); const handleSave = () => api.updateUser(role) return ( <div className={styles.wrapperEditable}> <Dropdown className={styles.dropdownRole} options={["Yes", "No"]} value={role} onChange={(e) => setRole(e.target.value === "Yes" ? Role.ADMIN : Role.MEMBER) } /> <Icon name="tick" onClick={() => handleSave()} /> <Icon name="cancel" onClick={onCancel} /> </div> ); }

A continuación se muestra mi componente desplegable:

 export interface DropdownProps { label?: string; id?: string; options: string[]; value: string; onChange: (e: ChangeEvent<HTMLSelectElement>) => void; className?: any; } export function Dropdown({ label, id, options, onChange, className, }: DropdownProps) { return ( <div className={styles.wrapper}> <label className={styles.labeltext} htmlFor={id}> {label} </label> <select id={id} className={cx(className, styles.dropdown)} onChange={onChange} > {options.map((option) => ( <option key={option}>{option}</option> ))} </select> </div> ); }