React Forms Textarea

React Forms – Textarea

In regular HTML, the <textarea> element contains its value between the opening and closing tags:

But in React, form elements including <textarea> are treated as controlled components, meaning their value is managed by React using state.

So instead of using children text, you set the value using a value attribute.

Basic Textarea Example

import { useState } from "react";

function MyForm() {
const [message, setMessage] = useState("Hello from React!");

return (
<div>
<h3>Textarea Example</h3>

<textarea
value={message}
onChange={(event) => setMessage(event.target.value)}
/>

<p>You typed: {message}</p>
</div>
);
}

import { useState } from "react";

function MyForm() {

const [message, setMessage] = useState("Hello from React!");

return (

<div>

<h3>Textarea Example</h3>

<textarea

value={message}

onChange={(event) => setMessage(event.target.value)}

<p>You typed: {message}</p>

</div>

);

}

export default MyForm;

How It Works

React Feature	Description
`useState()`	Stores the input text
`value` prop	Binds textarea value to state
`onChange` event	Updates the state when user types

Submitting a Form with Textarea

import { useState } from "react";

function FeedbackForm() {
const [feedback, setFeedback] = useState("");

const handleSubmit = (event) => {
event.preventDefault();
alert("Submitted Feedback: " + feedback);
};

return (
<form onSubmit={handleSubmit}>
<label>Your Feedback:</label><br />

<textarea
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
rows={5}
placeholder="Type your message here..."
/>

<br />
<button type="submit">Submit</button>
</form>
);
}

import { useState } from "react";

function FeedbackForm() {

const [feedback, setFeedback] = useState("");

const handleSubmit = (event) => {

event.preventDefault();

alert("Submitted Feedback: " + feedback);

};

return (

<label>Your Feedback:</label><br />

<textarea

value={feedback}

onChange={(e) => setFeedback(e.target.value)}

rows={5}

placeholder="Type your message here..."

<br />

<button type="submit">Submit</button>

</form>

);

}

export default FeedbackForm;

Textarea with Character Count (Real-time)

import { useState } from "react";

function MessageCounter() {
const [text, setText] = useState("");

return (
<>
<textarea
value={text}
onChange={(e) => setText(e.target.value)}
maxLength={200}
/>

<p>{text.length} / 200 characters</p>
</>
);
}

import { useState } from "react";

function MessageCounter() {

const [text, setText] = useState("");

return (

<textarea

value={text}

onChange={(e) => setText(e.target.value)}

maxLength={200}

<p>{text.length} / 200 characters</p>

</>

);

}

export default MessageCounter;

🧠 Key Points to Remember

✔ <textarea> does NOT use children text in React
✔ Always control its value using value + onChange
✔ Useful for long-form input like comments, messages, feedback

React Forms Textarea