React Textarea

Handling multi-line text input in React

📄 What is React Textarea?

React textarea is a controlled component for multi-line text input. Unlike HTML, React uses the value attribute instead of children, making it consistent with other form inputs and easier to manage with state. 


function CommentBox() {
  const [comment, setComment] = useState('');
  
  return (
    <textarea 
      value={comment}
      onChange={(e) => setComment(e.target.value)}
      placeholder="Write your comment..."
    />
  );
}

Output:

Textarea Features

📝

Multi-line Input

Accept long text content 

<textarea rows={5} />
🔢

Character Count

Track input length 

{text.length} / 200
📏

Max Length

Limit character count 

maxLength={200}
↔️

Resizable

Allow user resizing 

style={{ resize: 'both' }}

🔹 Basic Textarea

A controlled textarea in React works just like a controlled input. Use the value prop to set its content and onChange to update state. The rows attribute controls the initial visible height. 

import { useState } from 'react';

function MessageForm() {
  const [message, setMessage] = useState('');
  
  return (
    <div>
      <label>Message:</label>
      <textarea 
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        rows={4}
        cols={50}
        placeholder="Type your message here..."
      />
      <p>Preview: {message}</p>
    </div>
  );
}

Output:

Preview: [your text will appear here]

🔹 Textarea with Character Count

Display a character counter to help users stay within limits. This is especially useful for social media posts, comments, or any input with length restrictions. Show remaining characters or current count. 

function TweetBox() {
  const [tweet, setTweet] = useState('');
  const maxLength = 280;
  
  return (
    <div>
      <textarea 
        value={tweet}
        onChange={(e) => setTweet(e.target.value)}
        maxLength={maxLength}
        placeholder="What's happening?"
        rows={3}
      />
      <p>
        {tweet.length} / {maxLength} characters
      </p>
    </div>
  );
}

Output:

0 / 280 characters

🔹 Textarea with Validation

Validate textarea content to ensure users provide meaningful input. Check for minimum length, required fields, or specific patterns. Display helpful error messages when validation fails to guide users. 

function ReviewForm() {
  const [review, setReview] = useState('');
  const [error, setError] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (review.trim().length < 10) {
      setError('Review must be at least 10 characters');
      return;
    }
    
    setError('');
    alert('Review submitted!');
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <textarea 
        value={review}
        onChange={(e) => {
          setReview(e.target.value);
          setError('');
        }}
        placeholder="Write your review..."
        rows={5}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">Submit Review</button>
    </form>
  );
}

Output:

Review must be at least 10 characters

🔹 Auto-expanding Textarea

Create a textarea that automatically grows as users type more content. This provides a better user experience by eliminating scrollbars and showing all content at once without manual resizing. 

function AutoExpandTextarea() {
  const [text, setText] = useState('');
  const textareaRef = useRef(null);
  
  const handleChange = (e) => {
    setText(e.target.value);
    
    // Auto-expand
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = 
        textareaRef.current.scrollHeight + 'px';
    }
  };
  
  return (
    <textarea 
      ref={textareaRef}
      value={text}
      onChange={handleChange}
      placeholder="Start typing..."
      style={{ 
        minHeight: '60px',
        resize: 'none',
        overflow: 'hidden'
      }}
    />
  );
}

Output:

Textarea expands as you type

🔹 Textarea with Word Count

Track word count in addition to character count for content that has word-based limits. Split the text by spaces and filter out empty strings to get an accurate word count. 

function ArticleEditor() {
  const [article, setArticle] = useState('');
  
  const wordCount = article
    .trim()
    .split(/\s+/)
    .filter(word => word.length > 0)
    .length;
  
  return (
    <div>
      <textarea 
        value={article}
        onChange={(e) => setArticle(e.target.value)}
        placeholder="Write your article..."
        rows={8}
      />
      <div>
        <span>Words: {wordCount}</span>
        <span style={{ marginLeft: '20px' }}>
          Characters: {article.length}
        </span>
      </div>
    </div>
  );
}

Output:

Words: 0 Characters: 0

🧠 Test Your Knowledge

How do you set the content of a textarea in React?