Reputation: 7620
I am using react-phone-number-input
and some custom inputs.
I would like to use my custom input within this library.
as you can see from the Documentation, I can use the following props :
inputComponent
to use a custom input, as long as
Phone number <input/> component.
Receives properties:
value: string — The formatted value.
onChange(event: Event) — Updates the formatted value from event.target.value.
onFocus() — Is used to toggle the --focus CSS class.
onBlur() — Is used to toggle the --focus CSS class.
Other properties like type="tel" or autoComplete="tel" that should be passed through to the DOM <input/>.
Must also either use React.forwardRef() to "forward" ref to the <input/> or implement .focus() method.
So I have done the following :
<PhoneInputWithCountry inputComponent={<Input />}/>
With my input beeing the following (It is simplified, but globally it looks like this) :
export const Input = forwardRef<HTMLInputElement, InputProps>(
(
{
value,
disabled,
onBlur,
prefixComponent,
suffixComponent,
...rest
},
ref
) => {
return (
<div>
<input
disabled={disabled}
onBlur={onBlur}
ref={ref}
value={value}
{...rest}
/>
</div>
);
}
);
I think all looks fine, but I get prompted with
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of
ForwardRef(Input)
.
I do not understand at all what is wrong here.
Upvotes: 1
Views: 131