Mastering React Text Area: A Complete Guide For Developers

Are you struggling with handling user input in your React forms?

A single-line input works well for names or emails, but what happens when users need to write longer messages or detailed feedback? This is where a React text area becomes useful.

For example, a feedback form with only a single-line input can be frustrating for users who want to share more detailed thoughts. A textarea allows multiline input, making it ideal for comments, messages, or descriptions.

This blog will explain how to add a textarea to a React app, covering state management, form submission, and real-time validation.

What is a Textarea in React?

A textarea element in HTML is used for multiline text input. In React, it is controlled and rendered as part of a React component. Depending on how you manage the textarea value, you can implement it as either a controlled component or an uncontrolled component.

Controlled vs Uncontrolled Textarea

In controlled components, the textarea value is bound to a state variable. React takes full control of the value and updates it every time the user types. This makes it easier to handle form submission and validation.

In contrast, uncontrolled components rely on the textarea’s initial value and are managed using DOM elements.

Controlled Component Example:

Here’s how you can create a controlled component with a textarea:

Copy
import React, { useState } from 'react';

function CommentForm() {
  const [comment, setComment] = useState(''); // state variable for textarea value

  const handleChange = (event) => {
    setComment(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent form submission
    console.log('Submitted comment:', comment);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="comment">Your Comment:</label>
      <textarea
        id="comment"
        name="comment"
        value={comment} // controlled textarea
        onChange={handleChange} // onchange event handler
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default CommentForm;

In this example, the textarea value is controlled by the React state (comment). Every time the user types, the handleChange event handler updates the state, ensuring that the current value is reflected in the textarea element.

Uncontrolled Component Example:

For less frequent updates, you might use an uncontrolled component:

Copy
import React, { useRef } from 'react';

function FeedbackForm() {
  const commentRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted comment:', commentRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="feedback">Feedback:</label>
      <textarea id="feedback" name="feedback" ref={commentRef} defaultValue="Enter your feedback" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default FeedbackForm;

In this case, the textarea element’s value is accessed using commentRef and not updated on each user interaction.

Key Concepts in React Textarea

Handling Form Submission

To collect form data from a textarea component, you should implement an onchange event handler and manage the state variable for its input value. This is crucial for validation and providing a smooth user experience.

Displaying Initial or Default Values

Setting an initial value for a textarea is simple with the defaultValue prop:

Copy
<textarea defaultValue="This is the initial content" />

The defaultValue prop differs from the value prop. While defaultValue is used for uncontrolled components, value is reserved for controlled components.

Handling Error Messages and Validation

Validation in React textareas is crucial for ensuring that users provide the correct input. For instance, you can display an error message if the textarea is left empty:

Use React state to display or hide error messages based on validation logic.

Advanced Techniques for React Textareas

Focus Management and Blur Events

Managing focus on a textarea can improve accessibility and user experience. The onFocus and onBlur event handlers detect when the textarea loses focus.

Disabled and Read-Only Textareas

To prevent user edits, set a textarea as read-only or disabled:

Styling Textareas with CSS

To ensure your React textarea looks professional and responsive, apply custom styles using CSS. For instance:

Common Use Cases for React Textarea

• Comment sections

• Message inputs

• Contact forms

• Multiline input for JSON or code snippets

These are just some form elements that leverage the textarea component for handling user input.

Final Thoughts!

Implementing a React text area as a controlled component or uncontrolled component provides flexibility for handling user interactions. Whether you need real-time validation, dynamic updates, or an optimized way to handle form submission, mastering the React textarea will make your web development more efficient and user-friendly.

By managing the textarea value with a state variable and using appropriate event handlers, you ensure a consistent user experience. Apply these best practices in your React components, and your forms will always feel smooth and intuitive.

if (!comment.trim()) {
  setErrorMessage('Comment cannot be empty');
}

<textarea onFocus={() => console.log('Textarea focused')} onBlur={() => console.log('Textarea lost focus')} />

<textarea readOnly value="This is read-only text" />
<textarea disabled defaultValue="This textarea is disabled" />

textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  font-size: 16px;
}