Typescript complaining about TextArea element for having rows prop?-CodePudding

I have a reusable input textarea component as shown below:

import { InputHTMLAttributes } from 'react';
import classes from './Input.module.css';
interface InputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
    errorMessage?: string;
}
const TextArea = ({ errorMessage, ...rest }: InputProps) => (
    <div
        className={classes.InputBox}
        error-message={errorMessage ?? 'Invalid Input Provided'}
    >
        <textarea {...rest} />
    </div>
);
export default TextArea;

However when I use this:

<TextArea
                                    placeholder="Message"
                                    rows={4}
                                    value={message}
                                    onChange={(e) => setMessage(e.target.value)}
                                />

TypeScript complains:

Type '{ placeholder: string; rows: number; value: string; onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void; }' is not assignable to type 'IntrinsicAttributes & InputProps'.
  Property 'rows' does not exist on type 'IntrinsicAttributes & InputProps'.

Can someone help me understand which type should I use to avoid this error?

CodePudding user response：

InputHTMLAttributes is for input elements, not textarea elements. For textarea elements, use TextareaHTMLAttributes:

interface InputProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
    errorMessage?: string;
}

It has rows.