1
00:00:00,810 --> 00:00:05,820
In the last section we created a new component called fib and we added a couple of methods to it to

2
00:00:05,840 --> 00:00:08,540
set to fetch some data from our back and API.

3
00:00:08,850 --> 00:00:13,200
We're now going to add on the ability for this thing to be rendered onto the screen of our browser and

4
00:00:13,190 --> 00:00:15,260
show some information to our user.

5
00:00:15,420 --> 00:00:21,500
So to get started we're going to go to the bottom of the FIB class and define a render method inside

6
00:00:21,500 --> 00:00:26,860
if you're going to return a little bit of GSX will return a div.

7
00:00:27,010 --> 00:00:30,860
We know that we want to show a form to the user like this form right here.

8
00:00:31,000 --> 00:00:37,720
So I'm going to make a form tab samea a form tag that has a label a text input and a button assigned

9
00:00:37,720 --> 00:00:39,170
to it.

10
00:00:39,220 --> 00:00:53,460
So put in a form or put in a label with some text like enter your index or put in an input and then

11
00:00:53,460 --> 00:01:00,520
finally a button and for the button I'll give it some text like submit like so.

12
00:01:00,670 --> 00:01:05,980
Now we do have to add in some event handlers to the form tag and the input tag but we'll get back to

13
00:01:05,980 --> 00:01:07,480
that in just a moment.

14
00:01:07,480 --> 00:01:11,060
First let's take care of the other two rendering pieces we need.

15
00:01:11,320 --> 00:01:14,950
So we need to make sure that we print out all the different indices that we've ever seen.

16
00:01:14,950 --> 00:01:19,810
And we also print out all the different values that have been calculated as well.

17
00:01:19,870 --> 00:01:25,600
So for each of those two little tables right there I mean it lays an H three underneath the foreign

18
00:01:25,600 --> 00:01:26,160
tag.

19
00:01:27,520 --> 00:01:30,450
The first one will have a title or something like indexes.

20
00:01:30,460 --> 00:01:37,750
I have seen and then the second one all gives some text of something like I don't know about calculated

21
00:01:38,620 --> 00:01:39,440
values.

22
00:01:40,620 --> 00:01:45,120
Then underneath each of these We're going to call a helper method that is going to render the table

23
00:01:45,120 --> 00:01:50,910
of all the indices that have been seen and all the different calculated values that have been calculated

24
00:01:50,940 --> 00:01:53,420
by the read US worker.

25
00:01:53,430 --> 00:01:58,050
So for the first one I got to make a helper method and I will place it inside of here with a set of

26
00:01:58,050 --> 00:02:04,330
curly braces like so and I'll say this dot render scene indexes.

27
00:02:04,430 --> 00:02:09,470
So we need to define a helper method that will essentially just print out the list of all the indexes

28
00:02:09,710 --> 00:02:12,810
that are back end has ever seen.

29
00:02:12,850 --> 00:02:15,580
All go and define that helper method called render.

30
00:02:15,600 --> 00:02:19,730
Seeing indexes right now right above the render method.

31
00:02:19,770 --> 00:02:20,380
I'll add in.

32
00:02:20,430 --> 00:02:23,100
Render seen indexes.

33
00:02:25,420 --> 00:02:31,340
And then inside of here we're going to look at the value of scene indexes that we fetch when we called

34
00:02:31,670 --> 00:02:34,040
fetch indexes right here.

35
00:02:34,040 --> 00:02:41,990
So I will return this dot state DOT scene indexes now seen indexes just you know we haven't really looked

36
00:02:41,990 --> 00:02:43,700
at these data types that are floating around.

37
00:02:43,700 --> 00:02:50,390
But essentially this is an array as a variety of different objects in it and each object has a number

38
00:02:50,390 --> 00:02:55,490
property and that number property is the number that we want to print out on the screen.

39
00:02:55,490 --> 00:03:04,220
So I'm going to map over the list of all those objects and I get to put in a function right here.

40
00:03:04,220 --> 00:03:08,500
Notice how I've got the opening curly brace or some media parentheses right here.

41
00:03:08,590 --> 00:03:13,520
I'm going to pull off just that number property that we care about by putting down a set of curly braces

42
00:03:13,520 --> 00:03:18,610
like so and then adding an number to that and then inside the arrow function.

43
00:03:18,620 --> 00:03:20,050
I'll put in number.

44
00:03:20,540 --> 00:03:25,610
So this statement you see right here is going to iterate over every object in the scene indexes array

45
00:03:25,910 --> 00:03:28,610
and just pull out and return the number.

46
00:03:28,610 --> 00:03:32,210
So the result will be a list of numbers that we want to print on the screen.

47
00:03:32,630 --> 00:03:37,610
So to then make sure that they get printed out with a nice little comma in between each one I'll add

48
00:03:37,610 --> 00:03:45,660
on a dot join and to that all give a comma and a space right after it like so.

49
00:03:45,660 --> 00:03:49,680
And so this is going to take all of those numbers all the numbers in that array and join them together

50
00:03:49,680 --> 00:03:52,590
with a little comma and print them out very nicely on the screen.

51
00:03:54,130 --> 00:03:57,660
That's that's it for render scene indexes.

52
00:03:57,750 --> 00:04:03,290
Now for calculated values we'll do something very similar underneath calculated values H 3.

53
00:04:03,360 --> 00:04:08,900
I'll place a set of curly braces and we'll define a helper method called render values and call it with

54
00:04:08,900 --> 00:04:10,390
a set of parentheses.

55
00:04:10,860 --> 00:04:16,290
So this will be our helper method that will render out all the calculate values that we've ever worked

56
00:04:16,290 --> 00:04:17,920
with inside of our application.

57
00:04:19,110 --> 00:04:26,120
I'll again make a helper method right above the render method and I will call this one render values

58
00:04:26,240 --> 00:04:31,860
like so now the case is seen indices or seeing indexes.

59
00:04:31,860 --> 00:04:34,260
We were getting back in array of objects.

60
00:04:34,260 --> 00:04:38,210
That's the default return type when we're pulling data out of postscripts.

61
00:04:38,220 --> 00:04:43,170
And remember this list of data right here all being handled by postscripts whereas our diagram here

62
00:04:43,170 --> 00:04:48,570
we go the calculated values table down here is all data that is stored inside of restis.

63
00:04:48,630 --> 00:04:53,790
And we when we pull data out of retests we're actually going to get back an object that's going to have

64
00:04:53,790 --> 00:04:56,130
a bunch of key value pairs inside of it.

65
00:04:56,130 --> 00:05:01,740
So to build out that little table of values we're going to do just a little bit different iteration

66
00:05:01,740 --> 00:05:03,340
logic inside of here.

67
00:05:03,380 --> 00:05:06,340
We're going to first make a new array called entries.

68
00:05:06,810 --> 00:05:12,710
Well then iterate over all of the values that we have in these state values.

69
00:05:12,720 --> 00:05:14,600
Object.

70
00:05:14,840 --> 00:05:21,590
And then for every key inside there where the key represents the index of the Fibonacci number we're

71
00:05:21,590 --> 00:05:25,150
going to push a new entry into that entry's array.

72
00:05:25,160 --> 00:05:29,340
So I'll say entries push the open to set up a set of parentheses here.

73
00:05:30,620 --> 00:05:36,690
I'll put in a div that's going to get a key property because we are building out a re-act list and inside

74
00:05:36,690 --> 00:05:39,970
there all say four index key.

75
00:05:40,290 --> 00:05:47,190
I calculated this state values at key like so.

76
00:05:47,870 --> 00:05:52,890
And then at the bottom of render values I will return that list of entries that we created.

77
00:05:55,610 --> 00:05:56,660
Goetz's looks pretty good.

78
00:05:56,700 --> 00:06:03,060
Now the very last thing we have to do is set up some event handlers on both the input tag and the form

79
00:06:03,660 --> 00:06:08,410
to watch for any time that a user enters in some text and then presses the submit button.

80
00:06:08,930 --> 00:06:10,690
Sulphur start off at the input.

81
00:06:10,830 --> 00:06:12,700
I'm going to give myself a little bit of space here.

82
00:06:13,790 --> 00:06:19,830
I'll add on a value property to make this a controlled input and the Value property that we want to

83
00:06:19,830 --> 00:06:26,060
update here is going to be index.

84
00:06:26,070 --> 00:06:33,150
So back on the input tag we'll do this start states index will do an on change that's going to be called

85
00:06:33,150 --> 00:06:37,550
with an event and we'll take that event and update our state.

86
00:06:37,740 --> 00:06:41,100
So index's event that target that value.

87
00:06:41,670 --> 00:06:47,470
I'm going to zoom out again just so you can see that entire line.

88
00:06:47,530 --> 00:06:52,610
Now the very last thing we do we need to watch for any time that a user submits the form.

89
00:06:52,610 --> 00:06:58,270
So on the form I will add on a on Samit event handler that we'll call a callback that we'll call how

90
00:06:58,270 --> 00:07:02,860
about something like handle submit.

91
00:07:02,910 --> 00:07:08,340
Now we just have to watch for the handle submit event helper to be called Let's make sure we define

92
00:07:08,340 --> 00:07:09,620
that helper method.

93
00:07:10,110 --> 00:07:16,940
I'm going to go above render scene indexes right here and all the fine handle submit.

94
00:07:17,010 --> 00:07:19,490
Now we won't handle Samit to be a bound function.

95
00:07:19,530 --> 00:07:25,940
So I can to say handle submit equals an arrow function like so.

96
00:07:26,140 --> 00:07:30,730
This is going to be an async function because we are going to try to send some information to our back

97
00:07:30,730 --> 00:07:37,400
and API I in a market as a sync as well like so then inside of here we'll make sure that we keep the

98
00:07:37,400 --> 00:07:44,350
form from attempting to submit itself by calling event prevent default and then we will make a X-ers

99
00:07:44,380 --> 00:07:54,570
post request to API slash values and we're going to send in an object that has a key of index and the

100
00:07:54,570 --> 00:07:57,900
value will be whatever the user just typed into that input.

101
00:07:57,960 --> 00:07:59,890
So this outstate index.

102
00:08:00,240 --> 00:08:05,070
And then after successfully submitting this to the back end I can then clear out the value of the input

103
00:08:05,280 --> 00:08:09,850
by calling this dot set state index will be empty string.

104
00:08:11,530 --> 00:08:11,810
All right.

105
00:08:11,810 --> 00:08:13,560
So that's pretty much it.

106
00:08:13,720 --> 00:08:16,190
Again I know we're going through this extremely quickly.

107
00:08:16,210 --> 00:08:17,110
I can't say it enough.

108
00:08:17,110 --> 00:08:18,490
I'm just showing you this.

109
00:08:18,490 --> 00:08:22,930
In case you're a little bit curious about how this stuff is working behind the scenes but we could just

110
00:08:22,930 --> 00:08:25,330
about got everything done on the rock side.

111
00:08:25,360 --> 00:08:28,240
So let's take a quick pause right here and we'll continue in the next section.