Guide to the Textarea Tag in React
This might be the shortest guide of the entire course, and there are a couple reasons why I'm actually dedicating an entire guide to the textarea.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

One of them is, once again, like I mentioned in the last guide, I want you to be able to have one direct spot in the course if you ever wanna come back and reference the exact syntax needed for a textarea tag, and the other reason is because using a textarea tag is slightly different in React than it is in, say, normal HTML.

So if you look at a normal textarea tag, typically you are writing it like this, where you have a starting tag, you have whatever content, and then you have the closing textarea tag, and that is the traditional one you could click on, try it yourself right here, and you can see that is what you would usually build-out for a textarea tag.

large

React, though, because of those self-closing syntax that's available with the JSX system, because of that we can combine that. So this is, like I said, gonna be incredibly short, you will come down to the description, and all you're gonna have to do is change out where it says input, and change that out, and have it say textarea, hit save, and then when you come back here, you're gonna see we now have a textarea tag instead of an input.

large

And we can test this out, so With text area, and then put any kinda content you want inside of here, hit save, and then if you come to DevCamp Space and hit refresh and come all the way down, you can see we have With text area, and it has the content we wrote inside of there.

large

So that is something that is pretty cool. It's a very easy to use, textarea tags, and it's relatively similar to just normal HTML.

Now, you may have noticed a little, tiny bit of a bug when it comes to our select tag, and that's what we're gonna address in the next guide. Do you notice how, even though by default, the eCommerce was selected, and you would think that because it was selected, that should have been sent up, but nothing got changed.

Notice that we received a null value. And so we're gonna talk about why that is, 'cause that is gonna help you understand some key React concepts, and then we'll also fix it in the next guide.

Resources