Chapter 100: <textarea>

Core Idea

<textarea> follows the same controlled (value/onChange) vs. uncontrolled (defaultValue) split as <input>, but with one HTML divergence: React uses the value/defaultValue prop instead of HTML's native pattern of placing the initial text as the element's children.

Key Concepts

• Controlled: <textarea value={notes} onChange={e => setNotes(e.target.value)} /> — same mental model as a controlled <input> (Ch 98), just for multi-line text.
• Uncontrolled: <textarea defaultValue={initialNotes} /> — same as <input>'s defaultValue.
• Divergence from plain HTML: native HTML sets a <textarea>'s initial content via its children (<textarea>initial text</textarea>); React instead expects value/defaultValue as props and does not support setting content via children — an easy mistake when translating existing HTML directly into JSX (Ch 13's HTML→JSX conversion).
• Same read-only/warning behavior as <input>: passing value without onChange produces a read-only field and a console warning, for the same reasons.

Code Examples

<textarea value={notes} onChange={e => setNotes(e.target.value)} />

• What it demonstrates: the controlled pattern for multi-line text, using value/onChange rather than HTML's children-as-initial-content convention.

Key Takeaways

1. Use value/defaultValue, never children, to set a <textarea>'s content in JSX — this is a common HTML→JSX conversion trap.
2. Controlled/uncontrolled semantics and pitfalls mirror <input> exactly.
3. A controlled <textarea> without onChange is effectively frozen, same as a controlled <input>.

Connects To

• Ch 98 (<input>): the identical controlled/uncontrolled pattern.
• Ch 13 (Writing Markup with JSX): the HTML→JSX conversion context where this divergence commonly surfaces.