React Typescript error in TextArea : Type 'string' is not assignable to type number

Question

<textarea rows='3' 
  className='form-control' 
  placeholder='Enter About your description'/>

The expected type comes from property 'rows' which is declared here on type 'DetailedHTMLProps, HTMLTextAreaElement>'

Answer 1

Try this:

<textarea rows={3} 
  className='form-control' 
  placeholder='Enter About your description'/>

Answer 2

the row property requires a number, not a string. Also you will need to update the value of the textarea like this:

<textarea 
  name="description"
  value={formValues.description}
  rows={3} 
  className='form-control' 
  placeholder='Enter About your description'
  onChange={evt=>handleInputChange(evt)}/>

The handleInputChange function below:

// You can define an interface to type the formValues object like this
interface formValuesInterface {
    description: string
}

// Keep the description value in the state like this
const [formValues, setFormValues] = React.useState<formValuesInterface>({description: ''})

const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>)=> {
    const { name, type } = evt.target
    const value = target.type === 'checkbox' ? target.checked : target.value;
    setFormValues({ ...formValues, [name]: value })
}

Check out React forms for more information