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.onChangeupdates the state when the user types.rowsandcolsset 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
inputandtextareaare controlled components. - State is updated dynamically for each field.
- Easy to validate and process data before submission.