1 00:00:00,790 --> 00:00:04,510 In this video we're going to start working on a new component that's going to show out a list of results 2 00:00:04,510 --> 00:00:05,700 to our users. 3 00:00:05,710 --> 00:00:09,600 Remember all three of these different lists right here are essentially identical. 4 00:00:09,670 --> 00:00:09,920 Yeah. 5 00:00:09,930 --> 00:00:13,180 There's a different title at the top of each one and they're going to show some data. 6 00:00:13,180 --> 00:00:17,410 But at the end of the day they're really showing identical content or at least identically structured 7 00:00:17,410 --> 00:00:18,810 content to a user. 8 00:00:18,820 --> 00:00:22,870 So we're going to create one component that's going to be used three times to show each of these three 9 00:00:22,870 --> 00:00:24,100 different lists. 10 00:00:24,310 --> 00:00:28,150 To do so I'm going to flip back over into my editor inside my components directory. 11 00:00:28,150 --> 00:00:33,640 I'm going to make a new file called results list dot J.S.. 12 00:00:33,640 --> 00:00:36,840 So the idea is that this component is going to be a reusable component. 13 00:00:36,850 --> 00:00:41,280 That's going to show a list of results we got back from the Yelp API to get started. 14 00:00:41,290 --> 00:00:45,680 We'll write out some J.S. X or a little bit of scaffolding for a typical react component. 15 00:00:45,730 --> 00:00:49,060 So the top I will import react from react. 16 00:00:49,390 --> 00:00:56,690 I'll get view text and style sheet from React Native and I think that's it. 17 00:00:56,720 --> 00:01:07,340 I'll then create my component of results list and right now I'll return a view that has a piece of text 18 00:01:08,770 --> 00:01:13,480 of results list then after that we'll create our style sheet. 19 00:01:13,550 --> 00:01:16,000 So do a styles is style sheet. 20 00:01:16,310 --> 00:01:17,660 Create. 21 00:01:17,810 --> 00:01:23,560 And then finally an export default results list OK. 22 00:01:23,590 --> 00:01:28,950 So let's now try to show three instances of this component inside of our search screen so flip back 23 00:01:28,950 --> 00:01:29,820 over my search screen. 24 00:01:29,820 --> 00:01:32,070 Here it is right here at the top. 25 00:01:32,070 --> 00:01:33,180 I'm going to import 26 00:01:35,990 --> 00:01:41,890 results list from up one directory components results list. 27 00:01:41,960 --> 00:01:45,740 I'm also going to clean up that use effect function right here that we're not making use of inside this 28 00:01:45,740 --> 00:01:48,310 file anymore okay. 29 00:01:48,320 --> 00:01:49,630 So it looks good. 30 00:01:49,660 --> 00:01:56,090 So now we can show three copies of results list down inside of our view after our text element. 31 00:01:56,090 --> 00:01:57,940 And we're going to eventually delete that text element. 32 00:01:57,950 --> 00:02:01,190 But for right now we'll just leave it to make sure we're still fetching our data. 33 00:02:01,190 --> 00:02:08,870 I'm going to place results list and I'll duplicate it twice once and twice. 34 00:02:08,950 --> 00:02:13,780 Now I've got three separate copies of results list again each one of these is going to be given some 35 00:02:13,810 --> 00:02:16,360 number of results coming back from the Yelp API. 36 00:02:16,390 --> 00:02:22,370 It's going to need to show that header and then render out the big list of results so we fetch. 37 00:02:22,600 --> 00:02:26,380 And as a quick reminder this list is also supposed to be horizontally scalable. 38 00:02:26,380 --> 00:02:28,350 So we have to figure out how to deal with that as well. 39 00:02:29,030 --> 00:02:29,210 OK. 40 00:02:29,260 --> 00:02:33,740 So if I pull back over to my application I can now see three copies of results list. 41 00:02:34,420 --> 00:02:34,670 OK. 42 00:02:34,670 --> 00:02:35,780 That wasn't so bad. 43 00:02:35,930 --> 00:02:41,000 So let's keep going for right now without a doubt we're going to need to communicate some configuration 44 00:02:41,000 --> 00:02:45,500 data from our search screen component down into each of these three different copies. 45 00:02:45,500 --> 00:02:50,330 Remember anytime we communicate configuration data from a parent down to a child we refer to that as 46 00:02:50,330 --> 00:02:55,490 using the prop system or essentially another term for it is passing props. 47 00:02:55,490 --> 00:03:00,140 The first thing that we probably want to configure is the header text that each of these different sections 48 00:03:00,170 --> 00:03:01,480 is going to show. 49 00:03:01,490 --> 00:03:06,980 So the first one needs to be told to show the text cost effective and then bit pricier and then big 50 00:03:06,980 --> 00:03:07,870 spender. 51 00:03:08,000 --> 00:03:13,580 So let's try passing a prop from our search screen down into our results list that's going to tell the 52 00:03:13,580 --> 00:03:19,120 results list what header text to show so on results list right here. 53 00:03:19,120 --> 00:03:20,740 I'm going to make up a prop name. 54 00:03:20,740 --> 00:03:25,180 Remember when it's a component that you and I create we make up the names of the props we want to use 55 00:03:25,180 --> 00:03:26,350 on our own. 56 00:03:26,410 --> 00:03:31,690 In this case a name or an appropriate name for that text right there might be something like header 57 00:03:31,720 --> 00:03:34,990 or header text or title or something like that. 58 00:03:35,080 --> 00:03:36,940 I think maybe the title makes some sense. 59 00:03:36,940 --> 00:03:41,650 So I gonna pass in a title probably the first one will say cost effective 60 00:03:44,880 --> 00:03:55,000 then the second one will be bit pricier and then the third one can be big spender like so. 61 00:03:55,130 --> 00:04:00,340 So now inside of each of these different results list we're gonna have some bit of custom configuration. 62 00:04:00,450 --> 00:04:02,510 Remember just adding in a prop is not enough. 63 00:04:02,520 --> 00:04:07,590 However we have to now open up our results list component we need to receive that prop and then actually 64 00:04:07,590 --> 00:04:09,310 show it on the screen somehow. 65 00:04:09,440 --> 00:04:13,950 So I going to open up my results list once again remember and each time we pass a prop it's going to 66 00:04:13,950 --> 00:04:19,320 show up inside of an object in that first argument to our component we can receive the entire props 67 00:04:19,320 --> 00:04:23,340 object but usually we just structure out the different props we care about. 68 00:04:23,340 --> 00:04:28,830 So in this case we care about a prop called title so I'm not going to show that title element inside 69 00:04:28,850 --> 00:04:31,810 or that title text inside of our existing text tag. 70 00:04:32,220 --> 00:04:36,960 So I'll delete results list and replace it with red curly braces because remember we are referencing 71 00:04:36,990 --> 00:04:44,030 a javascript variable inside of Sanjay OSX and we'll print out title like so let's save this once again. 72 00:04:44,390 --> 00:04:47,870 And now we'll see cost effective bit pricier and big spender. 73 00:04:47,870 --> 00:04:49,190 Perfect. 74 00:04:49,250 --> 00:04:54,380 Now the last thing we need to do for this titled text right here is add in a little bit of styling to 75 00:04:54,380 --> 00:04:54,920 it. 76 00:04:56,250 --> 00:05:02,990 So inside my style sheet I'm gonna add in a section called Title remember if you want to you can call 77 00:05:02,990 --> 00:05:04,140 his title style. 78 00:05:04,160 --> 00:05:08,480 I'm not being super consistent throughout this course and whether I call these different style properties. 79 00:05:08,480 --> 00:05:12,750 Title title or titles title same title style. 80 00:05:12,920 --> 00:05:16,610 It's solely up to you if you want to add that in there's not necessarily a strong community convention 81 00:05:16,610 --> 00:05:17,920 one way or the other. 82 00:05:18,540 --> 00:05:23,820 So first off I going to give this thing a fights slightly larger font size in this case of 18. 83 00:05:23,820 --> 00:05:30,280 I'll give it a font weight which is going to make the font just look a little bit heavier of bold let's 84 00:05:30,460 --> 00:05:33,360 try starting off with just those two properties. 85 00:05:33,370 --> 00:05:41,630 Now apply that new style to my text element I'll do style is styles dot title I'll save that and Yep 86 00:05:41,750 --> 00:05:44,270 I'd say it looks pretty good okay. 87 00:05:44,340 --> 00:05:46,700 So we now have a good start to our results list. 88 00:05:46,770 --> 00:05:48,200 So let's take a quick pause right here. 89 00:05:48,240 --> 00:05:52,920 When we come back the next video we're going to start to pass in our list of different results to each 90 00:05:52,920 --> 00:05:55,560 of these different components and start to render them out on the screen.