How to get Input field type as props in react typescript

1
votes

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;
3
javascriptreactjstypescript
Can you provide the usage of this component? – hungdoansy
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
I guess, you need to declare constructor also as mentioned in reactjs.org/docs/uncontrolled-components.html#default-values – Aqdas

3 Answers

2
votes

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 component prop and works even if that type is not exported by the given lib/component.

Though there are a few caveats:

does not work with statically declared default props and generic props

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

1
votes

type: string should be replace by type: InputType

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

1
votes

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.