CODEWITHSUNDEEP
javascripthtmlreactjs
Kristina Bressler
Kristina Bressler

Reputation: 1732

Textarea self closing tag? <textarea />

I recently watched some tutorials on youtube about building a simple react markdown previewer for a Freecodecamp challenge. However, the tutorials I've seen so far added this tag <textarea /> in the react code instead of <textarea></textarea>.

I looked up more info about <textarea> tag and w3schools, mdn web docs, and few other web sites still showed the <textarea> with its closing tag </textarea> with the reason that it acts as a container for the stuff inside the <textarea> tag. And to use it in different form would break the code.

Anyway, I'm wondering if it's still necessary in React framework to use the self-closing method such as this: <textarea />? I'm just trying to figure out if I need to use <textarea /> in my project I'm coding or whether it's bad coding/practice.

Upvotes: 0

Views: 1123

Answers (3)

Mark Swardstrom
Mark Swardstrom

Reputation: 18110

In React, textarea has been modified so it can behave like other inputs. The value, which would normally be a child in HTML is an attribute in React

<textarea value={this.state.value} onChange={this.handleChange} />

See the React Docs for more info on textarea

Upvotes: 1

Dilshan
Dilshan

Reputation: 3001

It's not HTML in React. It is JSX. If you don't have children in a element, just use self close tag. If you have children in element, then use separate close tag.

You can see how it convert HTML to JSX using this web site - https://magic.reactjs.net/htmltojsx.htm

Upvotes: 1

Axnyff
Axnyff

Reputation: 9964

For React, it's mostly a convention. One convention is to always use self-closing tags if there is no content ( children) inside of your component. So for a textarea it would be self closing.

Upvotes: 1

Related Questions