I am using react-select-currency and it is giving me : Unhandled Runtime Error TypeError: _this.props.onChange is not a function. Steps: I created a new file named react-select-currency.d.ts in my project's types directory Package : https://www.npmjs.com/package/react-select-currency
<FormField
control={form.control}
name="currency_type"
render={({ field }) => (
<FormItem className="md:col-span-1 ">
<FormLabel>Currency</FormLabel>
<SelectCurrency
onCurrencySelected={(selectedValue: string) => {
console.log("Selected Value: ", selectedValue);
// field.onChange(selectedValue);
}}
value={field.value}
className="w-full"
key={field.value}
/>
<FormMessage />
</FormItem>
)}
/>
I tried the documentation still not working for me. Can anyone help me out here.
I Implemented custom currency picker and using react-flag-kit for Flag Ui Sample code, as this code gives me more flexibility than any package.
export const currencies = [
{ currency: "USD", countryName: "United States", symbol: "$", iso: "US" },
{ currency: "AFN", countryName: "Afghanistan", symbol: "؋", iso: "AF" },
{ currency: "ALL", countryName: "Albania", symbol: "L", iso: "AL" },
Add more here...
}
Code example to use it is as follows:
<Combobox data={currencies.map((currency: CurrencySelector) =>
({ value: currency.currency, label: ( <FlagIcon code={currency.iso as FlagIconCode} /> {currency.countryName} ({currency.currency}) ), }))}
onSelect={(selectedValue) => {
field.onChange(selectedValue);
}}
defaultValue={field.value}
/>