How to create a reusable Input component with React & TypeScript?

Question

It's my first attempt with React TypeScript and don't fully understand the error I'm getting when trying to build a reusable Input component. What is the TypeScript way of approaching this kind of component?

See Component & Error below:

import React, { FC, InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    name: string;
    label: string;
    ref: string;
}

const Input: FC<InputProps> = ({ name, label, ...otherProps }, ref) => {
    return (
        <label className={styles.formLabel}>
            {label}
            <input
                className={styles.formInput}
                {...otherProps}
                name={name}
                ref={ref}
            />
        </label>
    );
};

const FormInput = React.forwardRef(Input);

export default FormInput;

Error

TypeScript error in /Users/Timmchoover/Documents/Projects/evaly/evaly-app/src/before-login/components/forms/form-input/form-input.component.tsx(25,36):
Argument of type 'FC<InputProps>' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, InputProps>'.
  Types of property 'defaultProps' are incompatible.
    Type 'Partial<InputProps> | undefined' is not assignable to type 'undefined'.
      Type 'Partial<InputProps>' is not assignable to type 'undefined'.  TS2345

    23 | };
    24 | 
  > 25 | const FormInput = React.forwardRef(Input);
       |                                    ^
    26 | 
    27 | export default FormInput;
    28 |

Steven Than · Accepted Answer · 2021-06-09 09:36:41Z

10

I don't think FC is satisfying the type constraint here, try ForwardRefRenderFunction instead:

import React, { ForwardRefRenderFunction, InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    name: string;
    label: string;
    ref: string;
}

const Input: ForwardRefRenderFunction<HTMLInputElement, InputProps> = ({ name, label, ...otherProps }, ref) => {
    return (
        <label className={styles.formLabel}>
            {label}
            <input
                className={styles.formInput}
                {...otherProps}
                name={name}
                ref={ref}
            />
        </label>
    );
};

const FormInput = React.forwardRef(Input);

export default FormInput;

Alternatively, you can combine Input and FormInput into one and let TypeScript infer for you:

const FormInput = React.forwardRef<HTMLInputElement, InputProps>(({ name, label, ...otherProps }, ref) => {
    ...
});


export default FormInput;

edited Jun 9, 2021 at 9:36

answered Jun 9, 2021 at 9:30

Steven Than

4541 gold badge4 silver badges8 bronze badges

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

1 Comment

Tim Over a year ago

That solved it, thanks! Didn't know about the ForwardRefRenderFunction. Guess I need to spend some more time in the docs. Appreciate the help!

Nazif Malhi · Accepted Answer · 2022-09-05 21:10:37Z

0

const Input = React.forwardRef<React.HTMLInputElement, InputProps>({ name, label, ...otherProps }, ref) => {
    return (
        <label className={styles.formLabel}>
            {label}
            <input
                className={styles.formInput}
                {...otherProps}
                name={name}
                ref={ref}
            />
        </label>
    );
};

edited Sep 5, 2022 at 21:10

answered Sep 5, 2022 at 10:43

Nazif Malhi

264 bronze badges

2 Comments

Keith Over a year ago

And that will remove the type's. You might have not noticed, but the OP is also using Typescript..

Nazif Malhi Over a year ago

Sorry, i edited my answer now i think i will satisfy your condition and again sorry there was a typing mistake now i corrected

Collectives™ on Stack Overflow

How to create a reusable Input component with React & TypeScript?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related