I am working on my React native using TypeScript.
Basically, i have a FormInput.tsx
component that should receive certain props:
interface Props { labelValue?: string; placeholderText: string; restProps?: any;}interface State {}export default class FormInput extends React.Component<Props, State> { constructor(props: Props) { super(props); } render() { const {labelValue, placeholderText, restProps} = this.props; return (<View style={styles.inputContainer}><View style={styles.iconStyle}><Text>X</Text></View><TextInput style={styles.input} value={labelValue} placeholder={placeholderText} {...restProps} placeholderText="#666" /></View> ); }}
As you can see using restProps
I am trying to spread whatever the other props that ight be passed in inside the LoginScreen.tsx
file:
export default class LoginScreen extends React.Component<Props, State> { constructor(props: Props) { super(props); } render() { return (<View style={styles.container}><Image source={require('../assets/rn-social-logo.png')} style={styles.logo} /><Text style={styles.text}>RN Social App</Text><FormInput placeholderText="Email" keyboardType="email-address" /></View> ); }}
From the LoginScreen.tsx
file, I tried adding keyboardType="email-address"
inside my FormInput
component. I expected that this extra prop will be covered by the spread operator which is through restProps
where I deconstruct it inside FormInput component.
Upon checking on my LoginScreen
component, its highlighting the keyboardType and returning this error:
Type '{ placeholderText: string; keyboardType: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInput> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'. Property 'keyboardType' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInput> & Readonly<Props> & Readonly<{ children?
Any idea what's causing this? Please help!