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.