Actualmente tengo un componente que toma un código de moneda y devuelve un SVG del país correspondiente. Quiero expandir el componente para instancias en las que queremos buscar por nombre de país y no por código de moneda. Los accesorios actuales que se pasan al componente son:
currencyCode, que es algo así como "AED" y countryLabel, que es algo así como "Emiratos Árabes Unidos"
import Afghanistan from "./CountryFlags/Afghanistan.js"; // condensed imports const currencyCodeMap = { AED: UnitedArabEmirates, AFN: Afghanistan, ALL: Albania, AMD: Armenia, AOA: Angola, ARS: Argentina, AUD: Australia, AZN: Azerbaijan, }; type Props = { currencyCode?: string, countryLabel?: string, className?: string, }; const CountryFlag = ({ currencyCode, countryLabel, className }: Props) => { const FlagComponent = currencyCodeMap[currencyCode]; if (!FlagComponent) { return <StyledIcon isOberonIcon={true} name={"countryFallback"} />; } return ( <StyledImageWrapper className={className}> <FlagComponent /> </StyledImageWrapper> ); };Traté de actualizar mi currencyCodeMap a algo como:
AED | "United Arab Emirates" para que la etiqueta o el código devolvieran una bandera, pero no alegría. ¿Alguna sugerencia?
AED | "United Arab Emirates" no es una sintaxis JavaScript válida.
¿Por qué no tener un objeto como:
type CountryEntry = { currencyCode: string, countryLabel: string, flagComponent: JSX.Element } Luego tenga una matriz de estos y use .find() para obtener el componente.
Se vería algo como esto:
import Afghanistan from "./CountryFlags/Afghanistan.js"; type Props = { currencyCode?: string, countryLabel?: string, className?: string, }; type CountryEntry = { currencyCode: string, countryLabel: string, flagComponent: JSX.Element } const flags: CountryEntry[] = [ { currencyCode: "AFN", countryLabel: "Afghanistan", flagComponent: Afghanistan }, /* ... */ ]; const CountryFlag = ({ currencyCode, countryLabel, className }: Props) => { const countryEntry = flags.find( (f) => f.countryLabel === countryLabel || f.currencyCode === currencyCode ); if (!countryEntry) { return <StyledIcon isOberonIcon={true} name={"countryFallback"} />; } else { const FlagComponent = countryEntry.flagComponent; return ( <StyledImageWrapper className={className}> <FlagComponent /> </StyledImageWrapper> ); };