In the section we're going to go through a quick solution to the last problem or the last quiz.
So if you read the directions I've got them up here a kind of hint at the top essentially we've got
a user form component right here.
It has a functional component and we need to Reflektor it to be a class based component instead.
Now this might seem like kind of a trivial task to go through but to be honest in a tremendous number
of cases you're going to find that you're going to decide to create a functional component to represent
something inside of your app and then later on realize that that component needs to have state or a
lifecycle method or something like that.
And so refactoring a functional component to a class based component is something that you end up doing
rather frequently.
So let's get to it.
I've got my user form right here.
The first thing I'm going to do is replace that function declaration with a class declaration instead.
So let's say a class User Form extends re-act dot component and then I'm going to open up my curly brace.
I notice I got my curly brace right there.
I still have the closing curly brace from the function down right there as well.
So now all I really have to do is wrap this return statement on all the GSX inside of it inside of a
render method.
So I'm going to put a new line right there.
It looks like it put an extra curly braces for me automatically I'm going to make sure I delete that
and then I can add my render method.
I'm going to indent the GSX in that return statement and then close off the render method like so.
So I know that those curly braces kind of were coming and going rather quickly.
So just make sure that you've got a opening curly brace for the class up here a closing one down here
the render method with the opening curly brace there and the closing curly brace right there and we'll
know that everything is work.
When we still see that kind of enter a username and a text input on the preview panel over here.
So now I'm going to check my solution
and sure enough it looks like we're good to go.
All right.
Not bad.
So let's take a pause right here and we'll take a shot at another exercise in the next video.