Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Type '{ placeholderText: string; keyboardType: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

$
0
0

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?

enter image description here

Any idea what's causing this? Please help!


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>