Typescript complaining about TextArea element for having rows prop?


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) => (
        error-message={errorMessage ?? 'Invalid Input Provided'}
        <textarea {...rest} />
export default TextArea;

However when I use this:

                                    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?

>Solution :

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

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

It has rows.

Leave a Reply Cancel reply