React Textarea

React Textarea

In standard HTML, a <textarea> stores its content between the opening and closing tags. In React, it is usually treated as a controlled input with a value prop and an onChange handler.

That gives you one consistent way to manage text fields, whether you are working with a single-line input or a larger multi-line editor.

Using Textarea

import { useState } from 'react';

function EssayForm() {
  const [text, setText] = useState("Write your essay here.");
  return <textarea value={text} onChange={(e) => setText(e.target.value)} />;
}

Common Uses

• Comment forms.
• Feedback boxes.
• Bio or description fields.
• Message editors and support tickets.

Common Mistakes

• Using children instead of value in React.
• Forgetting the onChange handler on a controlled textarea.
• Initializing state with undefined when you want a visible default value.

Practical Tip

If the field starts empty, use an empty string instead of null or undefined. That keeps the textarea controlled from the beginning and avoids React warnings.