So let's use this as a time for helping us to understand exactly how the lifecycle process of a React component works. So when this Portfolio Form loads up, so when this Portfolio Form mounts, what occurs? We walk through in detail, in our deep dive, of the lifecycle method.

So we know that the class is instantiated. We know that everything in the Constructor runs. Then we know the Render function runs, and then we have various forms of lifecycle hooks that occur. Now, one thing that does not happen is any defaults in a form do not get pushed up. Those are simply inside of the JSX code, but eCommerce being pre-loaded here is not actually touching anything having to do with state or our build form method or anything like that.

So let's look at the code right here. So we can see that we have our select tag, and this select tag, we know it works. However, it only works when it's been changed. So the only time that we're actually taking one of these data points and updating state is when a change occurs.

And then, as we've seen, if you come all the way up to the top, we have the category having the default value of an empty string. So in the scenario where you go and you create a new record and you see eCommerce listed here, and if that was the category you wanted, you may think, okay, I don't even have to touch it.

But all React sees is an empty string inside of state, because if you never hit onChange, then the onChange never, this handleChange function never gets run for that specific input which means that setState never occurs, and that means that we are left with an empty string.

So there are a number of fixes for this, it's not that difficult to change. The very easiest is by simply giving a default category, so I could say the default category is eCommerce inside of state, so we know the constructor is going to run as soon as the class is initiated, so as soon as the component or even before the component mounts, and category no longer be an empty string.

So let's test this out with a few different tests. So I'm first gonna say, with no change, just to make sure this is working. So now if I hit save and then come to DevCamp space, hit refresh, and come all the way down. You can see that eCommerce now is being sent up as the default value.

And anytime you make a change like that, let's also make sure that making an alteration, so picking out some other item such as Enterprise is going to work. And then I can say something like With Change, hit save, and then come back to DevCamp space, and let's verify this is working.

You scroll down, we have With Change and Enterprise. So we've fixed the bug, and hopefully, through that, we've also seen some of how the lifecycle, not just the methods, but the lifecycle itself inside of a React component works, and you've also learned how you can establish a default value in your state.

Resources

• Source Code