CODEWITHSUNDEEP
htmlreactjstextarea
xandert.93
xandert.93

Reputation: 189

Why does <textarea> in React accept a value attribute but in HTML, it does not?

Not sure if this is React specific, but, why does the following work in React and render some text to the element:

<textarea value="Some text."></textarea>

but the same in plain HTML does not:

<textarea value="Some text."></textarea>

maybe I am missing something or done something foolish? Apologies and thanks in advance!

Upvotes: 2

Views: 775

Answers (2)

Quentin
Quentin

Reputation: 944442

The textarea child content represents the default value of a text area, but the value property represents the current value.

It is the current value that needs to be manipulated via JS, not the default value.

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 203466

In HTML the text area is a non-self-closing tag and has content. It defines its text by children.

textarea

<textarea id="story" name="story" rows="5" cols="33">
  It was a dark and stormy night...
</textarea>

In React it uses the value attribute. Note that is also self-closing and takes no children.

textarea tag

This keeps the textarea element consistent with other form elements such as input and select.

<textarea
  id="story"
  name="story"
  rows="5"
  cols="33"
  value="It was a dark and stormy night..."
/>

Upvotes: 1

Related Questions