Code follows this description.
react-phone-number-input allows uses to replace its default <input /> JSX tag with one's own, which specifically requires the type React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>> and needs a forwardRef (to allow access to the <input />).
Whilst I believe I have provided this with myTextInput the compiler is complaining that:
Property '$$typeof' is missing in type 'Element' but required in type 'ForwardRefExoticComponent<... and
Type 'Element' is not assignable to type 'ForwardRefExoticComponent<...
OK, myTextInput = <ForwardedInput does return an <input /> JSX so yes it is a React Element and therefore the error messages make some sense. But said tag will resolve to a React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>> so how can I get the compiler to recognise that?
Thank you for reading.
import React, { forwardRef, InputHTMLAttributes } from 'react';
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
const ForwardedInput = forwardRef<any, InputHTMLAttributes<HTMLInputElement>>(
(props, ref) => {
const { onChange, value } = props;
return (
<input
type="text"
ref={ref}
onChange={onChange}
value={value}
/>
);
}
);
const MyPhoneInput = () => {
const ref = React.createRef();
const myTextInput = <ForwardedInput
onChange={() => {}}
value="string"
ref={ref}
/>;
return (
<div>
<PhoneInput
placeholder="Enter phone number"
value={"value"}
inputComponent={myTextInput}
onChange={() => {
return;
}}
/>
</div>
);
};
export default MyPhoneInput;