1
00:00:01,080 --> 00:00:02,820
‫So let's now render

2
00:00:02,820 --> 00:00:05,613
‫and display the current question.

3
00:00:07,020 --> 00:00:10,350
‫So of course, we will not render all the questions

4
00:00:10,350 --> 00:00:13,800
‫at the same time here, but instead, one by one.

5
00:00:13,800 --> 00:00:16,650
‫And so therefore, we need a way of knowing

6
00:00:16,650 --> 00:00:19,110
‫which the current question is.

7
00:00:19,110 --> 00:00:22,680
‫So basically, we need some way of keeping track

8
00:00:22,680 --> 00:00:25,680
‫which question is the current one.

9
00:00:25,680 --> 00:00:29,340
‫And so let's add a new piece of state

10
00:00:29,340 --> 00:00:31,830
‫to our initial state here.

11
00:00:31,830 --> 00:00:35,730
‫And we could call this the current, or the current index,

12
00:00:35,730 --> 00:00:38,733
‫but I would like to just call it index.

13
00:00:40,890 --> 00:00:43,500
‫And this index starts at zero

14
00:00:43,500 --> 00:00:45,840
‫because we will use this index here

15
00:00:45,840 --> 00:00:48,330
‫to take a certain question object

16
00:00:48,330 --> 00:00:50,520
‫out of the questions array.

17
00:00:50,520 --> 00:00:53,760
‫And so the first element of this questions array

18
00:00:53,760 --> 00:00:55,890
‫is element number zero,

19
00:00:55,890 --> 00:00:58,860
‫therefore, our index starts at zero.

20
00:00:58,860 --> 00:01:01,500
‫And so then in the future, at some point,

21
00:01:01,500 --> 00:01:04,080
‫if we want to display the next question,

22
00:01:04,080 --> 00:01:06,840
‫we can already imagine that we will do that

23
00:01:06,840 --> 00:01:09,390
‫by changing this index.

24
00:01:09,390 --> 00:01:12,450
‫So then in the future, when we change that index

25
00:01:12,450 --> 00:01:13,890
‫from zero to one,

26
00:01:13,890 --> 00:01:16,470
‫that should display the next question.

27
00:01:16,470 --> 00:01:18,780
‫So it should then re-render the screen,

28
00:01:18,780 --> 00:01:22,263
‫and therefore, this needs to be a state variable.

29
00:01:23,880 --> 00:01:24,780
‫So that's the reasoning

30
00:01:24,780 --> 00:01:28,770
‫behind why we need this variable right here,

31
00:01:28,770 --> 00:01:30,390
‫or this piece of state,

32
00:01:30,390 --> 00:01:34,410
‫and also why it needs to be state in the first place.

33
00:01:34,410 --> 00:01:37,590
‫And again, it's because it needs to re-render the screen

34
00:01:37,590 --> 00:01:40,140
‫once it is updated.

35
00:01:40,140 --> 00:01:43,260
‫But anyway, let's now take this index

36
00:01:43,260 --> 00:01:46,950
‫to pass in the right question object

37
00:01:46,950 --> 00:01:48,903
‫into our question component.

38
00:01:50,190 --> 00:01:51,960
‫So this component will, of course,

39
00:01:51,960 --> 00:01:56,310
‫need access to that current question.

40
00:01:56,310 --> 00:02:00,480
‫And as we just said, that will be questions,

41
00:02:00,480 --> 00:02:05,013
‫so the array at the current position, which is index.

42
00:02:07,590 --> 00:02:09,300
‫Now here, that is not available

43
00:02:09,300 --> 00:02:13,140
‫because we haven't yet destructured this index

44
00:02:13,140 --> 00:02:14,283
‫out of the state.

45
00:02:15,150 --> 00:02:16,293
‫But there we go.

46
00:02:17,640 --> 00:02:19,770
‫And now let's go to this component.

47
00:02:19,770 --> 00:02:23,580
‫And just like before, if I hit the command key

48
00:02:23,580 --> 00:02:24,720
‫and then click here,

49
00:02:24,720 --> 00:02:27,540
‫it will automatically go to that component,

50
00:02:27,540 --> 00:02:29,373
‫even if it is in another file.

51
00:02:31,740 --> 00:02:36,243
‫So here, let's now receive that question.

52
00:02:40,230 --> 00:02:42,720
‫And then let's display it.

53
00:02:42,720 --> 00:02:44,580
‫Well, first, let's even take a look

54
00:02:44,580 --> 00:02:46,680
‫at the shape of this object,

55
00:02:46,680 --> 00:02:49,323
‫so that we actually know what we are dealing with.

56
00:02:51,360 --> 00:02:52,980
‫So let's come to the console,

57
00:02:52,980 --> 00:02:55,593
‫and as we click here, that should appear.

58
00:02:56,580 --> 00:02:58,080
‫So inside the question,

59
00:02:58,080 --> 00:03:00,813
‫we have the question property,

60
00:03:01,680 --> 00:03:04,503
‫so that's what we want to use first.

61
00:03:05,850 --> 00:03:09,693
‫So here we have basically question.question.

62
00:03:11,730 --> 00:03:12,870
‫And so with this,

63
00:03:12,870 --> 00:03:16,980
‫we get the question already here in the UI.

64
00:03:16,980 --> 00:03:17,970
‫Great.

65
00:03:17,970 --> 00:03:22,200
‫But then we also have this array of the options.

66
00:03:22,200 --> 00:03:25,770
‫And so next, we will want to loop over this array,

67
00:03:25,770 --> 00:03:29,250
‫and, of course, display these options as well.

68
00:03:29,250 --> 00:03:33,120
‫Now, this time, I will not use an ordered list for that

69
00:03:33,120 --> 00:03:35,610
‫because we will not have list elements,

70
00:03:35,610 --> 00:03:37,503
‫but actual buttons.

71
00:03:39,600 --> 00:03:43,563
‫So here, let's call this the options.

72
00:03:45,060 --> 00:03:47,880
‫And so then here we loop over

73
00:03:47,880 --> 00:03:50,913
‫question.options,

74
00:03:51,810 --> 00:03:54,090
‫and then .map.

75
00:03:54,090 --> 00:03:57,990
‫So here, each of them is a question,

76
00:03:57,990 --> 00:04:00,423
‫or actually, it is an option.

77
00:04:01,590 --> 00:04:03,480
‫And so then for each of them,

78
00:04:03,480 --> 00:04:06,600
‫what I want to do is to return a button

79
00:04:06,600 --> 00:04:09,630
‫with the class name of btn

80
00:04:09,630 --> 00:04:13,113
‫and btn-option.

81
00:04:14,820 --> 00:04:17,640
‫Okay and then, as for the text,

82
00:04:17,640 --> 00:04:20,400
‫it should simply be the option itself

83
00:04:20,400 --> 00:04:23,910
‫because as we see, this is just a simple string.

84
00:04:23,910 --> 00:04:27,210
‫So each of the options is just the string

85
00:04:27,210 --> 00:04:30,183
‫and so that's already looking great.

86
00:04:31,350 --> 00:04:33,000
‫Let's just see what we have here.

87
00:04:33,000 --> 00:04:36,400
‫Ah, of course, we are missing the key property

88
00:04:37,350 --> 00:04:39,540
‫so very important for optimization

89
00:04:39,540 --> 00:04:43,230
‫as we have already learned at this point.

90
00:04:43,230 --> 00:04:44,850
‫So the options are unique

91
00:04:44,850 --> 00:04:48,393
‫and therefore, we can use each of them as a key.

92
00:04:49,410 --> 00:04:52,230
‫So as we reload, then let's start.

93
00:04:52,230 --> 00:04:57,060
‫And there is our first question together with the options.

94
00:04:57,060 --> 00:04:57,893
‫Nice.

95
00:04:58,980 --> 00:05:00,540
‫Now here, actually,

96
00:05:00,540 --> 00:05:04,050
‫I would like to split this component in two.

97
00:05:04,050 --> 00:05:07,140
‫So whenever there is a list like this,

98
00:05:07,140 --> 00:05:10,440
‫I personally prefer to have a smaller component

99
00:05:10,440 --> 00:05:12,990
‫in a situation like this.

100
00:05:12,990 --> 00:05:15,390
‫So based on the logical separation

101
00:05:15,390 --> 00:05:17,670
‫of the content of this component,

102
00:05:17,670 --> 00:05:21,990
‫I would say that we can now split this component.

103
00:05:21,990 --> 00:05:24,870
‫So let's grab this entire part

104
00:05:24,870 --> 00:05:27,600
‫and let's create a new component.

105
00:05:27,600 --> 00:05:30,720
‫And actually, we are creating so many components,

106
00:05:30,720 --> 00:05:32,790
‫that it is a common practice

107
00:05:32,790 --> 00:05:37,563
‫to create a new folder called components.

108
00:05:39,060 --> 00:05:41,883
‫And so this is where we then create our components.

109
00:05:42,750 --> 00:05:45,360
‫So let's do this one right here

110
00:05:45,360 --> 00:05:48,900
‫and then I will later put all the other ones there as well.

111
00:05:48,900 --> 00:05:50,703
‫So options.js,

112
00:05:51,930 --> 00:05:54,570
‫and then our snippet again.

113
00:05:54,570 --> 00:05:57,720
‫And here we already have the JSX,

114
00:05:57,720 --> 00:05:59,073
‫so let's place that there.

115
00:06:00,000 --> 00:06:02,010
‫Now here, this is missing the question,

116
00:06:02,010 --> 00:06:05,550
‫but let's, first of all, place all the other components

117
00:06:05,550 --> 00:06:07,323
‫into this components folder.

118
00:06:08,220 --> 00:06:11,310
‫So that's app, the date counter,

119
00:06:11,310 --> 00:06:12,783
‫error, header,

120
00:06:13,830 --> 00:06:16,350
‫loader, main question,

121
00:06:16,350 --> 00:06:18,450
‫and start screen.

122
00:06:18,450 --> 00:06:21,190
‫So we already have a lot of components here

123
00:06:22,980 --> 00:06:25,503
‫and so let's place them all in there.

124
00:06:26,520 --> 00:06:28,200
‫Now of course, we will have a problem

125
00:06:28,200 --> 00:06:30,360
‫in the index.js file

126
00:06:30,360 --> 00:06:33,600
‫because it is still trying to read the app component

127
00:06:33,600 --> 00:06:35,733
‫from the same folder as before.

128
00:06:36,570 --> 00:06:39,090
‫But so now it's in the components folder,

129
00:06:39,090 --> 00:06:41,100
‫so we need to change that here,

130
00:06:41,100 --> 00:06:43,920
‫but then all the other will still work

131
00:06:43,920 --> 00:06:48,120
‫because we are importing them here inside app.js.

132
00:06:48,120 --> 00:06:51,180
‫And so here we are importing them from the same folder

133
00:06:51,180 --> 00:06:53,493
‫and so that's why this still works.

134
00:06:54,900 --> 00:06:57,240
‫All right, but anyway,

135
00:06:57,240 --> 00:06:59,250
‫coming back here to our options,

136
00:06:59,250 --> 00:07:02,043
‫here we now need to receive the question.

137
00:07:04,890 --> 00:07:09,250
‫And so then of course, we need to pass it in there

138
00:07:10,590 --> 00:07:12,993
‫so we need to even import that here.

139
00:07:13,860 --> 00:07:15,160
‫So options

140
00:07:16,320 --> 00:07:20,610
‫and then with the current question

141
00:07:20,610 --> 00:07:23,220
‫and then just importing that here.

142
00:07:23,220 --> 00:07:27,093
‫So import options from,

143
00:07:27,990 --> 00:07:30,573
‫and again, it's the same folder.

144
00:07:32,550 --> 00:07:34,620
‫And let's test.

145
00:07:34,620 --> 00:07:36,180
‫And there we go.

146
00:07:36,180 --> 00:07:39,420
‫Now, of course, when we click here now, nothing happens.

147
00:07:39,420 --> 00:07:42,933
‫And so that's what we will take care of in the next video.