So if you look at the form right now, if you start typing anything in, nothing is going to happen. We've seen this also when we built out our login form, so hopefully, this should seem a little bit familiar and it's because we are missing the connecting piece which is gonna be that event handler. So let's switch back into the code and we're gonna build out two handlers.

We already have the place holder for our handle change, and then we're also going to build out the form submission handler as well. So we have our handle change function here, and if you want you can also open up the console here, and you can see we have our synthetic event right here and this is how we have access to the target, so that is what we're going to be accessing exactly like how we did it with our login form.

So let's start building that out. Inside of here, we're going to say this.setState and then we're going to be passing into the set state object the name, and because we don't want to hard code all of those in, then we are going to do it dynamically.

So the way we can do it dynamically is by using the square brackets, and inside of there saying event.target.name and then that's gonna give us the name, so that's gonna give us each one of these items, name, description, category, etc. And it's pulling from that name value, that is exactly why they need to match. And then we need to grab the value, so here we can say event.target.value and now that's going to update the state for us.

portfolio-form.js

handleChange(event) {
  this.setState({
    [event.target.name]: event.target.value
  });
}

So let's test this out and if we come right here we should now be able to type into it, and yes we can exactly like that. And if you want, just to confirm that all of this is working, which is always a good practice. Let's open up the react dev tools and then let's take a look at that form component.

So use the inspector, grab the form component, and then let's take a look to see what the state values are. So right now, we can look down here and see that our state is being updated, and it's being updated for the correct values. So our name is updated, our position, and then also the URL right here, so all of that's working.

If I come down to the description and type anything in you can see it is updated automatically, so everything there is working nicely.

Now with that in place, let's also build the on submit handler. So this is going to be the form listener, so it's gonna check to see whenever a form is submitted, it's gonna make sure that it handles that process. So I'm gonna come up into the constructor and we'll say this.handlesubmit equals this.handlesubmit.bind and this.

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

Now let's actually create it, and we're not gonna be doing a lot of work with this right now, but I do wanna have it in place. So handleSubmit is going to automatically take in the event and then from here, we can do pretty much anything we want. So we could console log the values, so I could say console log event, but the most important thing that we need to do right now is to make sure that we prevent the default behavior.

Remember in JavaScript, and really actually in HTML, the default behavior, if I were to submit the form, so if I were to click save right here, is that it would re-render the entire page, which is definitely not what you want in React. You want React to be in charge of making changes on the pages. If you hit submit, it's actually gonna cause the entire page to refresh which can have some issues and it's a bad user experience.

So, what we want to do is to call event.preventDefault, which is a function just like this, and then hit save.

portfolio-forms.js

handleSubmit(event) {
  console.log("event", event);
  event.preventDefault();
}

So now we can come, open up the console, and make sure you clear it out, and so now if you come in here, and you don't even have to type anything in, 'cause remember we're gonna be getting our values from state, we're not gonna be getting them from the event itself, but if you click save, then, oh it looks like we have an issue, oh and I know exactly what the issue is.

So this is my fault, you have to also add the listener to the form itself. Everyone watching probably saw that as well. We have to add the on submit listener and then inside of here call this.handleSubmit inside a curly bracket, now we can hit save.

portfolio-forms.js

<form onSubmit={this.handleSubmit}>
        <div>
          <input
            type="text"
            name="name"
            placeholder="Portfolio Item Name"
            value={this.state.name}
            onChange={this.handleChange}
          />

And this is still a good exercise if you come up here, look at the URL, you'll see exactly what happened. You see that it put all of those data items up here, which is not what we want at all. I'm gonna go back to, I'm just gonna clear all of that out, come back to the portfolio manager so we have a clean URL, clear out the console. Now if I hit save, there we go. Notice that nothing got refreshed because we prevented the default action, we wired it up with the form, and now we're printing out that synthetic event.

Now I've mentioned it before, but I think this is a good time for a refresher. Why is this called a synthetic event? That's a great question. You might be asked inside of a coding interview, or anything like that, so it's something that should be kind of top of mind, and it's because of how React works. When we're working with a normal HTML website, we have what is called the DOM, and you've seen videos that talk about the DOM, it's the Document Object Model.

It is what every website in the world has. It has the document, which is the HTML document, and then it has things like the divs nested inside of it and h1 tags and image tags and those kinds of things, which is a traditional DOM model. Now in React, we have what is called the virtual DOM which means that we're not interacting with the DOM actually like the way that you would with a normal HTML website, and that's for performance reasons.

So what React did, is it created the virtual DOM. That's why we're not working with real events, we're working with synthetic events that are meant to give the same feel as working with a regular event, that's how we were able to call prevent default on the form submission event, but we're still technically working with React's virtual DOM.

There's nothing we have to do with that, that's the natural behavior of React, but I thought that because you see this term synthetic event a lot, I just wanted to make it 100% clear that that is the reason why it's called that is because we're working with a virtual DOM, and because of it it has a lot of nice and performant functionality that React is really know for, it's one of the key reasons why people use React.

Okay, so I know that was a lot of talk, and it may seem like we didn't actually do a lot of work because the form hasn't changed, but these are all items that are necessary in order to perform the kind of task that we're asked to do right here in building out this submission form.

So with all of this in place, in the next guide, we're gonna talk about a very special type of way that we can wrap form data up so that we can submit it along with any kind of data that includes things like images. So in the next guide, we're gonna start building that out.

Resources

• Source Code