1
00:00:00,970 --> 00:00:05,790
In the section we're going to go through a quick solution to the last problem or the last quiz.

2
00:00:05,800 --> 00:00:10,300
So if you read the directions I've got them up here a kind of hint at the top essentially we've got

3
00:00:10,330 --> 00:00:12,130
a user form component right here.

4
00:00:12,130 --> 00:00:17,380
It has a functional component and we need to Reflektor it to be a class based component instead.

5
00:00:17,380 --> 00:00:22,420
Now this might seem like kind of a trivial task to go through but to be honest in a tremendous number

6
00:00:22,420 --> 00:00:27,310
of cases you're going to find that you're going to decide to create a functional component to represent

7
00:00:27,310 --> 00:00:32,470
something inside of your app and then later on realize that that component needs to have state or a

8
00:00:32,470 --> 00:00:34,910
lifecycle method or something like that.

9
00:00:34,970 --> 00:00:39,700
And so refactoring a functional component to a class based component is something that you end up doing

10
00:00:39,940 --> 00:00:41,090
rather frequently.

11
00:00:41,260 --> 00:00:42,730
So let's get to it.

12
00:00:42,730 --> 00:00:44,860
I've got my user form right here.

13
00:00:44,890 --> 00:00:50,100
The first thing I'm going to do is replace that function declaration with a class declaration instead.

14
00:00:50,300 --> 00:00:58,500
So let's say a class User Form extends re-act dot component and then I'm going to open up my curly brace.

15
00:00:58,550 --> 00:01:00,370
I notice I got my curly brace right there.

16
00:01:00,370 --> 00:01:04,370
I still have the closing curly brace from the function down right there as well.

17
00:01:04,630 --> 00:01:10,570
So now all I really have to do is wrap this return statement on all the GSX inside of it inside of a

18
00:01:10,630 --> 00:01:12,030
render method.

19
00:01:12,100 --> 00:01:14,570
So I'm going to put a new line right there.

20
00:01:14,570 --> 00:01:18,790
It looks like it put an extra curly braces for me automatically I'm going to make sure I delete that

21
00:01:19,490 --> 00:01:22,490
and then I can add my render method.

22
00:01:22,710 --> 00:01:29,250
I'm going to indent the GSX in that return statement and then close off the render method like so.

23
00:01:29,550 --> 00:01:32,750
So I know that those curly braces kind of were coming and going rather quickly.

24
00:01:32,760 --> 00:01:37,500
So just make sure that you've got a opening curly brace for the class up here a closing one down here

25
00:01:37,950 --> 00:01:42,570
the render method with the opening curly brace there and the closing curly brace right there and we'll

26
00:01:42,570 --> 00:01:43,770
know that everything is work.

27
00:01:43,830 --> 00:01:49,660
When we still see that kind of enter a username and a text input on the preview panel over here.

28
00:01:49,680 --> 00:01:51,210
So now I'm going to check my solution

29
00:01:54,630 --> 00:01:56,470
and sure enough it looks like we're good to go.

30
00:01:56,550 --> 00:01:56,890
All right.

31
00:01:56,910 --> 00:01:57,480
Not bad.

32
00:01:57,570 --> 00:02:01,850
So let's take a pause right here and we'll take a shot at another exercise in the next video.