I don't really mean in terms of design, I'm actually speaking more to the types of fields. So right here we have a portfolio item name, that makes sense to be the text field. So does the URL, and so does the position, but the category should be a dropdown, and then the description should be a text area.

So in this guide, let's see the steps necessary for building a select tag for our category. So I'm going to switch into Visual Studio Code and come down into the JSX where we have our category, and instead of having an input, what I'm gonna do is switch this to be select, and a select tag needs to have each one of these items, so, except for type, obviously.

So we're gonna have name is gonna be category, the placeholder is also something we can get rid of, the value is gonna be this.state.category, and then, onChange will be this.handleChange. So, there's really not a lot of items that we need to update there, and so that is gonna be the start of the select tag, but this isn't gonna be a self-closing tag because we need to place the options inside of it.

So this will be things like Scheduling, or eCommerce, or whatever we're using, so let's remove that slash from right here so that it's no longer a self-closing tag, and then I will close off the select tag like this, and then, inside of these tags, this is where I'm going to place the options.

So, this is very similar to a normal HTML select tag. So we're gonna provide an option, and that's gonna have a value, and this value is something that we can hard-code because we know the items that we're gonna be using here. We know we're gonna have eCommerce, and the way that I'm spelling this is gonna be exactly what I want to be stored in the database.

Because when it comes to using select fields, the value from the option is what is going to be set inside of state, and then later on, inside of the database, so I want that value to be eCommerce, and then I'm going to just have eCommerce there, that is what is gonna be shown to the user.

So if you're not very familiar with using select tags, we'll walk through exactly what's going on here, so that it is clear, and then I'm gonna make a couple of copies of this. The next one is going to be Scheduling, and then we'll update Scheduling here, and then the last one can be Enterprise, and then I'll place Enterprise here.

portfolio-forms.js

<select
  name="category"
  value={this.state.category}
  onChange={this.handleChange}
>
  <option value="eCommerce">eCommerce</option>
  <option value="Scheduling">Scheduling</option>
  <option value="Enterprise">Enterprise</option>
</select>

Okay, so what we're doing here is this value is what is going to be updated, or is what's gonna update state. What we have here is simply what we're showing to the user, so this could be anything you want, it could be spelled however you want, that's what's gonna be shown inside of the select tag, but all that matters when it comes to what will be updated is what we have here for the value.

So, now that we have all of this, let's test it out. Open up Google Chrome, you can see we now have a dropdown. So we have our own little select box right here, and we can test this out.

So I have, let me refresh this, make sure that we have the latest version. Yeah, so I got rid of that demo app, let's now just create a new item, and I'll call it something like With select, and we don't even have to give a URL, position, or anything, but let's say this is Enterprise, and if I hit save, this should go and update the API.

So, I'll come back to DevCamp Space, hit refresh, and if I scroll down, I can see that With select, and yes, our category has been updated to Enterprise. So everything's still working, except now we have a different type of field element.

We're no longer forcing you, or if you have users, forcing the users to make sure they type in the exact value, now we're giving a nice select tag. And just to review what's needed, because part of why I'm dedicating this guide only to the select tag is because, until you've done this a few times, you may wanna come back and reference it.

So you may want to say, what was that syntax for implementing a select tag in React? And so, just to review, we have a select tag that we're going to be passing a name, a value, and then the onChange handler. So this is where all of that type of data and all that behavior is gonna be placed.

It's in the select tag itself, then you simply list out the options. This is identical to how you'd build a select tag with plain, vanilla HTML, and then you close off the select tag, and that is it. So now that we have our select tag done, in the next guide, we will build out the description with a text area tag.

Resources

• Source Code