how I get input field type as the props in react typescript I tried to send type as the string but it gives this error

**

No overload matches this call. Overload 1 of 2, '(props: InputProps | Readonly): Input', gave the following error. Type 'string' is not assignable to type '"number" | "button" | "select" | "textarea" | "time" | "image" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "checkbox" | "reset" | "submit" | "date" | "datetime-local" | ... 8 more ... | undefined'. Overload 2 of 2, '(props: InputProps, context: any): Input', gave the following error. Type 'string' is not assignable to type '"number" | "button" | "select" | "textarea" | "time" | "image" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "checkbox" | "reset" | "submit" | "date" | "datetime-local" | ... 8 more ... | undefined'. TS2769

**

here is my code

import React from 'react';
import { Input } from 'reactstrap';


interface IconInputProps {
    name: string,
    label: string,
    placeholder: string,
    required: boolean,
    errorMessage: string,
    autoFocus: boolean,
    type: string
    icon: string

}

class IconInput extends React.Component<IconInputProps> {

    render() {
        return (
            <div>
                <Input
                    name={this.props.name}
                    lable={this.props.label}
                    type={this.props.type}
                    placeholder={this.props.placeholder}
                />
            </div>
        );
    }
}

export default IconInput;

how I get input field type as the props in react typescript I tried to send type as the string but it gives this error

**

No overload matches this call. Overload 1 of 2, '(props: InputProps | Readonly): Input', gave the following error. Type 'string' is not assignable to type '"number" | "button" | "select" | "textarea" | "time" | "image" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "checkbox" | "reset" | "submit" | "date" | "datetime-local" | ... 8 more ... | undefined'. Overload 2 of 2, '(props: InputProps, context: any): Input', gave the following error. Type 'string' is not assignable to type '"number" | "button" | "select" | "textarea" | "time" | "image" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "checkbox" | "reset" | "submit" | "date" | "datetime-local" | ... 8 more ... | undefined'. TS2769

**

here is my code

import React from 'react';
import { Input } from 'reactstrap';


interface IconInputProps {
    name: string,
    label: string,
    placeholder: string,
    required: boolean,
    errorMessage: string,
    autoFocus: boolean,
    type: string
    icon: string

}

class IconInput extends React.Component<IconInputProps> {

    render() {
        return (
            <div>
                <Input
                    name={this.props.name}
                    lable={this.props.label}
                    type={this.props.type}
                    placeholder={this.props.placeholder}
                />
            </div>
        );
    }
}

export default IconInput;

• javascript
• reactjs
• typescript

• Can you provide the usage of this ponent? – hungdoansy Commented Nov 11, 2020 at 9:42
• input (ordinary HTML element) requires type as a string (I checked on codesandbox and my local), but Input (the one from 'reactstrap' you're using is requiring a more concrete type). – hungdoansy Commented Nov 11, 2020 at 9:45
• I guess, you need to declare constructor also as mentioned in reactjs/docs/uncontrolled-ponents.html#default-values – Aqdas Commented Nov 11, 2020 at 9:46

5 Answers 5

You could explicitly declare the type as:

import React, { ComponentProps } from 'react';
import { Input } from 'reactstrap';

interface IconInputProps {
    type: ComponentProps<typeof Input>['type'];
    // ...
}

This passes through the type declaration of a specific ponent prop and works even if that type is not exported by the given lib/ponent.

Though there are a few caveats:

does not work with statically declared default props and generic props

Source: https://github./piotrwitek/react-redux-typescript-guide#reactponentpropstypeof-xxx

in react 18, something called HTMLInputTypeAttribute exists, you can use that. i hope this helps anyone reading it.

type: string should be replace by type: InputType

And don't forget to import this import { InputType } from "reactstrap/lib/Input.d";

You can try to extend the InputProps which you should import from @types/reactstrap ( i guess it has types )

In your interface just add the props that are not in InputProps. So you can remove type, name and so on. So your code will look something like

interface IIconInputProps extends InputProps {
    label: string,
    errorMessage: string,
    icon: string
}

Also I would suggest to start the interface names with I so you know it's an interface.

You can declare the type as HTMLInputElement