1
00:00:01,140 --> 00:00:04,650
‫So to learn about the render props pattern

2
00:00:04,650 --> 00:00:08,853
‫let's start by setting up an example on Code Sandbox.

3
00:00:10,620 --> 00:00:14,340
‫So here is the URL for this code sandbox

4
00:00:14,340 --> 00:00:17,400
‫that we're going to work with over the next few lectures.

5
00:00:17,400 --> 00:00:20,250
‫And of course, I will include this URL

6
00:00:20,250 --> 00:00:22,803
‫in the resources of this lecture.

7
00:00:23,670 --> 00:00:26,580
‫So the small demo app that we have here is

8
00:00:26,580 --> 00:00:29,430
‫for now simply this one list here.

9
00:00:29,430 --> 00:00:30,870
‫So we have basically a list

10
00:00:30,870 --> 00:00:34,650
‫of products which we can collapse here.

11
00:00:34,650 --> 00:00:37,440
‫Then we also have another button down here

12
00:00:37,440 --> 00:00:39,720
‫which is basically to show less.

13
00:00:39,720 --> 00:00:43,230
‫And so then it only shows three of the products.

14
00:00:43,230 --> 00:00:45,720
‫And then of course when we click again

15
00:00:45,720 --> 00:00:47,733
‫it then shows all of them again.

16
00:00:48,840 --> 00:00:50,490
‫So here in our code

17
00:00:50,490 --> 00:00:53,850
‫we are generating those products here randomly

18
00:00:53,850 --> 00:00:56,790
‫using this faker JS library.

19
00:00:56,790 --> 00:01:01,500
‫And then I'm also generating here some fake companies.

20
00:01:01,500 --> 00:01:04,893
‫But here you can see that we're actually not using them.

21
00:01:05,820 --> 00:01:08,640
‫Then we have this product item component

22
00:01:08,640 --> 00:01:11,910
‫which is basically each of these items here.

23
00:01:11,910 --> 00:01:13,890
‫And then we have something similar

24
00:01:13,890 --> 00:01:18,630
‫for a company item, which again, is also not being used.

25
00:01:18,630 --> 00:01:21,780
‫And then we have the list itself, which we can see

26
00:01:21,780 --> 00:01:26,780
‫down here is simply included in our app component.

27
00:01:26,850 --> 00:01:28,860
‫So we just include this list,

28
00:01:28,860 --> 00:01:31,950
‫pass it a title of products that we see here

29
00:01:31,950 --> 00:01:36,030
‫and then those random products that we generated initially.

30
00:01:36,030 --> 00:01:39,394
‫And then here we have a bunch of logic, which is responsible

31
00:01:39,394 --> 00:01:43,597
‫for doing this collapsing here that we saw

32
00:01:43,597 --> 00:01:48,597
‫and for rendering those items right here as a list.

33
00:01:50,880 --> 00:01:53,250
‫So what I want you to do right now

34
00:01:53,250 --> 00:01:56,774
‫or maybe also after the video is finished, is to check

35
00:01:56,774 --> 00:02:00,360
‫out this entire code on your own and really

36
00:02:00,360 --> 00:02:05,070
‫understand this entire implementation of the list component.

37
00:02:05,070 --> 00:02:08,460
‫Because what we want to do next is to basically

38
00:02:08,460 --> 00:02:11,014
‫reuse this list component also

39
00:02:11,014 --> 00:02:14,236
‫for the list of fake companies.

40
00:02:14,236 --> 00:02:18,772
‫So we basically also want to loop over these companies

41
00:02:18,772 --> 00:02:23,730
‫and for each of them display this company item right here.

42
00:02:23,730 --> 00:02:27,600
‫So for each product render one item, which is

43
00:02:27,600 --> 00:02:32,040
‫of course completely different then the product item.

44
00:02:32,040 --> 00:02:34,830
‫Now the thing is that here in this component

45
00:02:34,830 --> 00:02:38,130
‫we have a bunch of stateful logic

46
00:02:38,130 --> 00:02:42,030
‫which of course we can share using custom hooks.

47
00:02:42,030 --> 00:02:45,330
‫So we could basically create one product list

48
00:02:45,330 --> 00:02:48,900
‫and then one company list, and then have this logic here

49
00:02:48,900 --> 00:02:51,990
‫in a custom hook, and then get that logic

50
00:02:51,990 --> 00:02:55,800
‫into each of these lists using that custom hook.

51
00:02:55,800 --> 00:02:58,110
‫So that would be one solution

52
00:02:58,110 --> 00:03:01,500
‫but then we wouldn't get the corresponding buttons

53
00:03:01,500 --> 00:03:04,290
‫and the way that everything is laid out.

54
00:03:04,290 --> 00:03:08,340
‫So we wouldn't get any of this JSX here.

55
00:03:08,340 --> 00:03:10,230
‫So this button right here.

56
00:03:10,230 --> 00:03:11,834
‫Then this other button.

57
00:03:11,834 --> 00:03:14,822
‫Also the logic here of conditional rendering.

58
00:03:14,822 --> 00:03:18,682
‫And so again, all of this we couldn't really get

59
00:03:18,682 --> 00:03:22,260
‫if we were to share this data logic here

60
00:03:22,260 --> 00:03:24,900
‫simply using React hooks.

61
00:03:24,900 --> 00:03:27,390
‫So here we really want to reuse

62
00:03:27,390 --> 00:03:31,380
‫both the logic and the UI that we have created here

63
00:03:31,380 --> 00:03:33,660
‫for both of these lists.

64
00:03:33,660 --> 00:03:36,602
‫So product lists and company list.

65
00:03:36,602 --> 00:03:39,840
‫So essentially what we want is to just

66
00:03:39,840 --> 00:03:42,990
‫reuse this component that we already have

67
00:03:42,990 --> 00:03:45,060
‫and which contains all the logic

68
00:03:45,060 --> 00:03:47,160
‫and UI that we want to share.

69
00:03:47,160 --> 00:03:49,050
‫But all that we want to be different

70
00:03:49,050 --> 00:03:52,800
‫between the tool lists is this part right here.

71
00:03:52,800 --> 00:03:54,060
‫So for the products

72
00:03:54,060 --> 00:03:57,360
‫we want to render this product item, and for the companies

73
00:03:57,360 --> 00:04:01,320
‫we want to render the company item components.

74
00:04:01,320 --> 00:04:03,847
‫But now the big question is,

75
00:04:03,847 --> 00:04:05,070
‫"How do we actually

76
00:04:05,070 --> 00:04:08,370
‫get these two different components in here

77
00:04:08,370 --> 00:04:12,734
‫so they can be rendered in this unordered list?"

78
00:04:12,734 --> 00:04:16,798
‫Well, one idea would be to use the children prop

79
00:04:16,798 --> 00:04:18,840
‫that we already know.

80
00:04:18,840 --> 00:04:21,400
‫So we could grab this entire UL here

81
00:04:23,460 --> 00:04:28,090
‫and then we could just pass it in like this

82
00:04:29,610 --> 00:04:31,510
‫and you don't need to write this code.

83
00:04:32,640 --> 00:04:36,540
‫So we could then pass it in like this again.

84
00:04:36,540 --> 00:04:39,930
‫But then the problem is that here we couldn't get access

85
00:04:39,930 --> 00:04:42,330
‫to these display items.

86
00:04:42,330 --> 00:04:46,110
‫So these display items are basically the number

87
00:04:46,110 --> 00:04:48,474
‫of items that can be displayed, which are sometimes all

88
00:04:48,474 --> 00:04:52,950
‫of them, but sometimes only the first three.

89
00:04:52,950 --> 00:04:56,970
‫So depending whether we clicked on that purple button

90
00:04:56,970 --> 00:04:59,823
‫that we saw initially at the bottom of the list.

91
00:05:01,200 --> 00:05:05,100
‫So this doesn't really work, except if we wanted to

92
00:05:05,100 --> 00:05:08,376
‫just use all the products.

93
00:05:08,376 --> 00:05:11,460
‫So then maybe we could make this work.

94
00:05:11,460 --> 00:05:13,620
‫But this is really not ideal

95
00:05:13,620 --> 00:05:18,000
‫because ideally we also want to reuse, of course,

96
00:05:18,000 --> 00:05:21,180
‫this unordered list with this class name.

97
00:05:21,180 --> 00:05:26,180
‫So we would not want to have this here once for the products

98
00:05:27,930 --> 00:05:32,930
‫and then again for the companies, right?

99
00:05:33,090 --> 00:05:35,760
‫So we want to reuse all of this.

100
00:05:35,760 --> 00:05:38,833
‫And again, we also want that functionality

101
00:05:38,833 --> 00:05:41,790
‫of the collapsed list.

102
00:05:41,790 --> 00:05:45,900
‫And so the children prop is really not an option

103
00:05:45,900 --> 00:05:49,290
‫because it is quite limited in the fact that it only

104
00:05:49,290 --> 00:05:52,830
‫allows us to really pass in some content.

105
00:05:52,830 --> 00:05:57,390
‫But here, what we need is not to only pass the content in,

106
00:05:57,390 --> 00:05:59,795
‫but also pass in the instructions

107
00:05:59,795 --> 00:06:03,030
‫on how the items should be rendered.

108
00:06:03,030 --> 00:06:04,470
‫And as you can guess,

109
00:06:04,470 --> 00:06:08,490
‫that's where the render props pattern comes into play.

110
00:06:08,490 --> 00:06:11,340
‫And so let's move on to the next lecture

111
00:06:11,340 --> 00:06:14,610
‫and check out how we can solve this problem

112
00:06:14,610 --> 00:06:16,893
‫using the render props pattern.