Remember there are a few key items, three specifically, that we need to implement in order to build the structure for this form. We first need to capture each one of the data elements inside of state, so we're gonna have to create state, and then we are gonna list out each one of the elements that we're gonna be using.

Then from there, we need to add the form. Inside the form, we're gonna have the data input type, the name, and the value. Then from there, remember, if we only have those two things, we are not actually gonna be able to type anything in, because the value is gonna be the same as state, so we need a way of connecting the two, we need a way of handling and listening for change events in the form so that we can update state.

So in this guide, let's do two out of the three items. In this guide, we're going to list out and define our state, so that we have a starting base state, and then we're gonna go and create the form elements. And then in the next guide, we'll create a handler that allows us to update that state.

So now, let's create a constructor, so I'm gonna create a constructor. We are gonna be taking in props, and remember, the reason for that, is because we're gonna be passing those functions as props from the portfolio manager component. And so we're gonna take those in. As always, we need to call super, and then let it know that we are working with props, and now let's create the state.

So, I'll say this.state=, and now we can list out every one of those state items. I'm going to say name, and each one of these is gonna start off with an empty string, 'cause that's gonna be our base state, and then from there we'll have a description.

And if you're curious about how I'm getting each one of these, these are simply the exact same names that are listed inside of DevCamp Space. So if you go, let me switch over to the browser, so if you go into DevCamp Space, we're gonna be listing, not the ID, that's generated automatically, but the name, description, URL, category, position, each one of those I'm getting straight from there, so I'm not making these up out of thin air.

And if you're working on an application that isn't this application, so later on as you're building out your own apps, you're going to be given this list of attributes. So don't worry, you're never gonna have to just make it up out of thin air, you'll be able to have a list that you can build from.

So description, and after that let's say category, each one of these should just be an empty string. And then, position, URL, and then we have our three images. Remember, we have a thumb_image, then we have a banner_image, then lastly we have the logo. Okay, so that is our list of each one of the items we're going to capture inside of this form. And now that we have that, we can actually create the form itself.

So we can keep one of these h1's, just so we have it there in place, but now we can create the form, and we will have, don't worry, we are gonna have an on submit handler, but I'm not gonna worry about that right now, 'cause we have plenty of other things that we need to add.

So the first thing I'm gonna do is create a div for each one of the sections. So if you look, let's look at the final goal, notice here how we have, this list, or this grid, where we have two items, two items, one item, three items, and then one item. It may not really look like a grid, but if you split it all out, that's exactly what we have. We have a two-column row, a two-column row, a single row, then simply, three items that are listed right next to each other, and then, another item.

So, let's just, with that in mind, let's just wrap each one of these up in their own wrapper divs just to make it easier to organize. And inside of here, this is where we're gonna create the actual form elements. So the first one is gonna be an input, and then it's gonna be of type, text, 'cause this is gonna be our name.

And then we'll have our name which also is going to be name. And then we can add a placeholder value, oh, we can say, portfolio item name. And then the value itself, this.state.name. And then, let's just add the onChange handler even though we haven't created it yet, and the only reason for that is just for efficiency reasons.

We're gonna have a number of elements that we're gonna add in this guide, and I don't think it's really worth your time to just create these inputs knowing we're gonna need that, and then in a later guide just go and duplicate that and populate it, we might as well just add it right now even if we don't have that onChange handler. So, we're gonna say onChange and then call this.handleChange.

Now, if this was not the first time, or if this was the first time we were doing this, I wouldn't skip that one step, usually, I'd create this function first, but we have done this before in our other forms, we know we're gonna have to do it, so that's why I'm making that decision. Okay, so those are all the elements needed for our first form element, so we're gonna have to do that for each one of these.

So now that we have it for that, now let's go, and the next one, if you wanna use this as a model, is going to be the URL. So, for the name here, it's not gonna be name anymore, this is gonna be URL, and remember, these names have to be directly matched and have to be identical to what is listed in state, 'cause when we build our handler, it is going to use that to perform the lookup in state. So we're gonna say URL, placeholder here can simply be, really, whatever you want, you can just say URL. The value is gonna be this.state.url, and onChange handler is going to remain the same.

Okay, so we've finished out two of these, and, looking at the next one, so this is gonna be in another wrapper div, and then we have a position, and then we have a category. Now, this is a drop-down list, we're not gonna do the full drop-down list right now, we'll just make it a text field, and then we're gonna have a guide that shows how to create select fields.

For right now let's just create, or copy this div, and use a regular text field, okay. And now, instead of name, we're gonna have position, and then for placeholder, we can just say position, value is position, same change handler. Once again, name here is gonna be category. Placeholder we can say category, but as I said, this is gonna be a select field, and then the value is gonna be category.

Okay, so we're getting close, I know this is a little bit tedious, but at the end of the day, you're learning to be a React developer, these are gonna be the kinds of things that you do, and the kinds of things that you build out, so we might as well knock it all out.

So the next one is gonna be the description. Once again, this is gonna be a text area field, for right now I'm just gonna leave it as a regular text field, we will update this later, but it is gonna be in its own wrapper div, so let's go and create that div, and just put the text field inside of it.

So instead of category this will be description, placeholder description, and then the description is gonna be the value. And let's see, we're gonna skip the images because we're gonna have to spend some time learning about this drop zone library, so we're gonna leave that to later, so I'm not even gonna put those in. And then lastly, let's add a button here at the very bottom.

Let's put it inside of a wrapper div. And then we'll say that this is gonna be a button, and this is gonna be, I'm gonna just say, save inside of it, and then we need to make sure we say that this is of type submit. Okay, so I know there's a lot of code, and we also are gonna get an error if we don't at least create a placeholder right here, so let's bind it. So we'll say this.handleChange = this.handleChange.bind(this), and then let's just create the function.

So for right now, we're gonna get the event, and then we can just console log it, and later on, we're going to actually add that. Handle change, and then let's get the event itself. Okay, so that was a lot of code. Let's go take a quick look at our system, make sure that we don't have any errors, and no, it looks like we're all good.

You can see, it might be a really ugly form, but it is a form.

So, we have the portfolio item name, the URL, position, category, description, so all of this is looking really good. Once again, I know that was tedious, building forms in React is something that really takes quite a bit of practice. You can see, we have those three steps.

As soon as you have practiced it enough, those three steps of creating the state, creating the form elements and then binding the event handler so you can listen for those form changes, once you've done that enough, it really will start to feel just second nature and you'll be able to knock these forms out in no time at all.

But I think this is a good place for us to stop right now, and in the next guide, we are going to completely build out that event handler so that we're listening for each one of those form changes so we can update our state.

Resources

• Source Code