I currently have a component that takes a currencyCode and returns an SVG of the corresponding country. I want to expand the component for instances whereby we want to search by country name and not by currency code. The current props that are passed into the component are:
currencyCode - which is something like "AED" & countryLabel - which is something like "United Arab Emirates"
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>
);
};
I tried to update my currencyCodeMap to something like:
AED | "United Arab Emirates" so that either the label or the code would return a flag, but no joy. Any suggestions?
AED | "United Arab Emirates" is not valid JavaScript syntax.
Why not have an object like:
type CountryEntry = {
currencyCode: string,
countryLabel: string,
flagComponent: JSX.Element
}
Then have an array of these and use .find() to get the component.
It would look something like this:
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>
);
};