1
00:00:00,270 --> 00:00:05,080
Did I tell you that in react the hair is gonna be multiple ways how we can write stuff.

2
00:00:05,700 --> 00:00:06,390
I think I did.

3
00:00:06,780 --> 00:00:11,970
So why don't we take a look at what would be alternative syntax that you're going to see for the state

4
00:00:12,500 --> 00:00:16,830
and again there's probably a 10000 question which is gonna be better.

5
00:00:16,860 --> 00:00:18,720
Again this is gonna depend on the situation.

6
00:00:19,080 --> 00:00:22,610
So why don't we create that first and then we're gonna talk about it.

7
00:00:23,040 --> 00:00:28,020
However before we do that why don't we utilize the fact that we can do the imports and exports with

8
00:00:28,020 --> 00:00:30,790
our application where the six modules.

9
00:00:30,960 --> 00:00:34,830
And why don't we transfer all these book data to a separate file.

10
00:00:35,110 --> 00:00:39,660
And this is something that we're going to be doing later on especially as your data grows bigger and

11
00:00:39,660 --> 00:00:40,250
bigger.

12
00:00:40,290 --> 00:00:46,050
This will gonna start getting annoying where we have the state and state has all this information and

13
00:00:46,050 --> 00:00:51,630
then you are entering somewhere here in the bottom so it might be much much more simpler if this data

14
00:00:51,630 --> 00:00:54,770
would be in a separate file and then we're just grabbing the data.

15
00:00:54,810 --> 00:00:55,830
So how this is going to work.

16
00:00:56,310 --> 00:01:01,040
Well let's say first and foremost Hey we're gonna swing back and then somewhere here we're going to

17
00:01:01,050 --> 00:01:06,330
create a new file and we're going to say new file and book data.

18
00:01:06,340 --> 00:01:07,430
You can call like this.

19
00:01:07,500 --> 00:01:08,840
This is going to be jazz.

20
00:01:08,870 --> 00:01:15,210
Then this is gonna be my array and still say hey box that is gonna be my array.

21
00:01:15,210 --> 00:01:17,960
And then within this array I would like all this information.

22
00:01:17,980 --> 00:01:21,270
Now I don't care about the book right now actually I think I can close it.

23
00:01:21,270 --> 00:01:26,770
I don't think it's gonna break anything as we're walking along and now let me get all this info.

24
00:01:27,260 --> 00:01:28,830
I'm gonna head over back to the box.

25
00:01:28,830 --> 00:01:33,420
We're going to copy and paste it maybe in order to make this interesting for so let me close the sidebar

26
00:01:33,840 --> 00:01:37,170
as well as Let's copy and paste it just so we have more of them.

27
00:01:37,170 --> 00:01:39,630
So one two three and you know what.

28
00:01:39,630 --> 00:01:43,570
One thing that I always forget to do as I'm setting up these ideas.

29
00:01:43,750 --> 00:01:45,960
I usually don't change them.

30
00:01:46,050 --> 00:01:49,820
So now let's make a difference and actually I we're gonna be adding proper ones.

31
00:01:49,890 --> 00:01:52,040
I will not going to be changing the names again.

32
00:01:52,050 --> 00:01:56,450
This is just to show you how everything works and doesn't really matter how many we have.

33
00:01:56,790 --> 00:02:00,890
But then here at the bottom I'm gonna say export I export.

34
00:02:00,900 --> 00:02:06,290
Now we have the name of a slave box so we can just do the default one or whatever we would like.

35
00:02:06,300 --> 00:02:10,170
We can do the obviously name one as well so let's write books.

36
00:02:10,190 --> 00:02:11,710
This is gonna be saved right now.

37
00:02:11,850 --> 00:02:17,210
And now as we head over back the book list we can do the import and do import.

38
00:02:17,310 --> 00:02:23,040
And then we're gonna be looking for books data again since this is a default I can name this whatever

39
00:02:23,040 --> 00:02:27,060
I like and we're gonna be looking for the book data.

40
00:02:27,060 --> 00:02:32,430
So from that we have forward slash and we're gonna be looking for the book data.

41
00:02:32,430 --> 00:02:37,770
And in this case what I would like to do is set up these books in the state not equal to already in

42
00:02:37,780 --> 00:02:41,320
array but I'm just going to use those books there and let's see how this is gonna work.

43
00:02:41,660 --> 00:02:42,900
So I would say books there.

44
00:02:43,230 --> 00:02:46,540
And the moment we say it you already notice that I have more of them.

45
00:02:46,800 --> 00:02:49,210
So you can clearly see that this is going to be working.

46
00:02:49,380 --> 00:02:52,560
And that's one of the neat things how we can separate the concern.

47
00:02:52,920 --> 00:02:57,000
So there is gonna be in one spot and again this would be very small data.

48
00:02:57,000 --> 00:03:01,230
In general we're going to be having much more and then we're just using the state to work with this

49
00:03:01,230 --> 00:03:01,950
data.

50
00:03:02,010 --> 00:03:09,270
However since we have the class this is a class based component and with the classes we have a constructor

51
00:03:09,600 --> 00:03:10,470
method.

52
00:03:10,470 --> 00:03:15,480
Now the constructor method is gonna be instantiated every time we're going to create a class every time

53
00:03:15,480 --> 00:03:22,200
we're going to render the class and that way what we can do is we can actually extended again or use

54
00:03:22,200 --> 00:03:23,260
it with props.

55
00:03:23,280 --> 00:03:28,340
Now how this is gonna work so we're gonna say that there is gonna be a constructor so there's gonna

56
00:03:28,350 --> 00:03:32,440
be again our method and then here we would need to pass the props.

57
00:03:32,480 --> 00:03:33,960
So would say prompts like this.

58
00:03:34,140 --> 00:03:38,060
And then within the constructor we need to use again super.

59
00:03:38,180 --> 00:03:44,250
And that's again it has to do something with the fact that we need to inherit that from the actual component

60
00:03:44,250 --> 00:03:44,960
class.

61
00:03:44,970 --> 00:03:51,120
Now what this is gonna allow us to do is set the stage here so I can say this that state.

62
00:03:51,120 --> 00:03:55,730
So in this case again the difference would be that we need to use this that and then we're looking for

63
00:03:55,730 --> 00:03:57,270
the state now in our case.

64
00:03:57,270 --> 00:03:58,810
Again we're gonna do the same thing.

65
00:03:59,350 --> 00:04:03,800
We're all gonna be having here the object and then we're going to pass it here.

66
00:04:03,870 --> 00:04:09,090
So I'm gonna grab this value we're just gonna cut it out and we're gonna copy and paste it.

67
00:04:09,120 --> 00:04:13,860
There is also one more thing that hasn't been working with events there's gonna be two ways of binding

68
00:04:13,860 --> 00:04:17,730
this and one way of binding your events is going to be in a construct.

69
00:04:18,210 --> 00:04:23,970
So I'm gonna leave this and you know what I can just tell you that again to answer your question well

70
00:04:24,060 --> 00:04:29,660
when you should use the constructor and when you should use super because both of them are being supported.

71
00:04:29,790 --> 00:04:36,260
Well the question is that if you're gonna be using the constructor this will gonna allow you to access

72
00:04:36,270 --> 00:04:39,600
the prompts as you're working directly in a state.

73
00:04:39,810 --> 00:04:44,760
Meaning the power props that are being passed down to a your class based component.

74
00:04:44,880 --> 00:04:51,510
And this is sometimes very useful where you can right away work with your state and the props that you're

75
00:04:51,540 --> 00:04:55,620
getting there's gonna be cases where we're gonna use lifecycle methods for that.

76
00:04:55,620 --> 00:05:01,900
So throughout the course whenever we're gonna utilize this we were going to rewrite this kind of syntax

77
00:05:02,350 --> 00:05:08,560
where the search state is gonna be set up in our constructor and we're just gonna be again following

78
00:05:08,560 --> 00:05:11,130
the syntax where we have the props and the super.

79
00:05:11,210 --> 00:05:18,310
And by the way in the year 6 the syntax is exactly the same whenever we are extending a class from somebody

80
00:05:18,310 --> 00:05:22,220
or let's say inheriting then we do need to use this soup.

81
00:05:22,540 --> 00:05:26,360
And the difference would be obviously in this case we're using this that's at stake.

82
00:05:26,620 --> 00:05:29,790
And normally we're just gonna use state one again.

83
00:05:29,800 --> 00:05:34,900
There's gonna be some benefits to this and there's gonna be some cases where we we're going to utilize

84
00:05:34,900 --> 00:05:41,620
this but if you don't use those cases obviously you can use either or you can work with the state as

85
00:05:41,620 --> 00:05:43,350
well as you can work with the construct.

86
00:05:43,570 --> 00:05:44,550
And last but not least.

87
00:05:44,560 --> 00:05:51,370
Again as we're covering the events this is the situation where again we're gonna have two types of bindings

88
00:05:51,730 --> 00:05:57,100
where we can just bind it with an arrow function or we're going to have to do it again in the construct.

89
00:05:57,100 --> 00:06:02,720
So that would be a short answer about the alternative syntax that we can have for the state.

90
00:06:02,830 --> 00:06:04,980
Everything else is gonna work exactly the same.

91
00:06:04,980 --> 00:06:06,060
I'm just gonna be no different.