React Textarea

In React, a textarea is treated similarly to other input elements, but it allows multi-line text input. You can use controlled or uncontrolled approaches to manage textarea data.

Controlled Textarea

A controlled textarea is bound to React state. This gives you full control over its value and makes it easy to handle updates, validations, and submissions.

Example – Controlled Textarea

import React, { useState } from "react";

function ControlledTextarea() {
  const [message, setMessage] = useState("");

  const handleChange = (e) => {
    setMessage(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted Message: ${message}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Message:
        <textareavalue={message}
          onChange={handleChange}
          placeholder="Type your message here..."
          rows={5}
          cols={40}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledTextarea;

value={message} binds the textarea to state.
onChange updates the state when the user types.
rows and cols set the visible size of the textarea.

Uncontrolled Textarea

An uncontrolled textarea is managed by the DOM, not by React state. You access its value using a ref.

Example – Uncontrolled Textarea

import React, { useRef } from "react";

function UncontrolledTextarea() {
  const messageRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted Message: ${messageRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Message:
        <textarearef={messageRef}
          placeholder="Type your message here..."
          rows={5}
          cols={40}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledTextarea;

ref={messageRef} accesses the DOM element.
The value is read only on form submission.
Less control during typing but simpler for quick forms.

Dynamic Inline Styling

You can also style textareas dynamically using inline styles:

React requires camelCase for CSS properties (e.g., backgroundColor instead of background-color).

const textareaStyle = {
  padding: "10px",
  borderRadius: "5px",
  border: "1px solid #ccc",
  width: "100%",
  fontSize: "16px",
};

<textarea style={textareaStyle} rows={6} placeholder="Styled Textarea" />

Handling Textarea with Other Inputs

You can combine textarea with other controlled inputs in a form state object:

import React, { useState } from "react";

function MultiInputForm() {
  const [form, setForm] = useState({ name: "", message: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form Submitted:", form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <inputtype="text"
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <br />
      <textareaname="message"
        value={form.message}
        onChange={handleChange}
        rows={5}
        cols={40}
        placeholder="Message"
      />
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MultiInputForm;

Both input and textarea are controlled components.
State is updated dynamically for each field.
Easy to validate and process data before submission.