How to get Input field type as props in react typescript

Question

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;

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
– hungdoansy, Commented Nov 11, 2020 at 9:45
I guess, you need to declare constructor also as mentioned in reactjs.org/docs/uncontrolled-components.html#default-values — Aqdas
– Aqdas, Commented Nov 11, 2020 at 9:46

Yoshi · Accepted Answer · 2021-05-10 08:19:09Z

4

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

edited May 10, 2021 at 8:19

answered Nov 11, 2020 at 9:57

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hungdoansy Over a year ago

Looks great. I guess it seems more readable than mine

JoyShaheb · Accepted Answer · 2024-07-02 19:08:25Z

2

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

answered Jul 2, 2024 at 19:08

JoyShaheb

6296 silver badges12 bronze badges

Comments

hungdoansy · Accepted Answer · 2020-11-11 09:54:30Z

1

type: string should be replace by type: InputType

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

answered Nov 11, 2020 at 9:54

hungdoansy

4864 silver badges11 bronze badges

Comments

Mihai T · Accepted Answer · 2020-11-11 10:01:06Z

1

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.

answered Nov 11, 2020 at 10:01

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

Comments

AhmadRaza365 · Accepted Answer · 2024-07-02 21:16:21Z

0

You can declare the type as HTMLInputElement

answered Jul 2, 2024 at 21:16

AhmadRaza365

961 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to get Input field type as props in react typescript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related