1 00:00:01,270 --> 00:00:05,980 We're now showing our list of results to the user but unfortunately well we still need a lot of styling 2 00:00:05,980 --> 00:00:07,060 to be applied. 3 00:00:07,090 --> 00:00:10,060 Remember eventually we want to have something that looks like this right here. 4 00:00:10,060 --> 00:00:15,840 So for each individual place or restaurant we want to show the image title stars and reviews. 5 00:00:15,840 --> 00:00:20,980 Now in order to achieve that we could definitely add in a ton of J.S. X to this render item function 6 00:00:21,370 --> 00:00:24,810 and return a giant block of J.S. X that shows that image name. 7 00:00:24,820 --> 00:00:25,380 And so on. 8 00:00:26,260 --> 00:00:29,800 However that would make our results list component start to get really bulky. 9 00:00:29,800 --> 00:00:33,940 In particular we would have a ton of additional styling and J a sex inside of here that would be kind 10 00:00:33,940 --> 00:00:35,340 of hard to read. 11 00:00:35,350 --> 00:00:41,440 Finally if we add all that logic directly into results list we will never be able to show just one individual 12 00:00:41,440 --> 00:00:45,670 result like just this thing right here to the user. 13 00:00:45,670 --> 00:00:49,600 Currently our application doesn't really have that requirement but maybe at some point time we want 14 00:00:49,600 --> 00:00:54,730 to show some like really interesting pick restaurant at the very top and we might want to show that 15 00:00:54,730 --> 00:00:59,340 inside of just one single kind of restaurant thing like that right there. 16 00:00:59,350 --> 00:01:03,940 So rather than stuffing all this additional J.S. sex into this render item function I think we should 17 00:01:03,940 --> 00:01:10,270 create a separate helper or a separate reusable component that we can then show from our results list 18 00:01:11,270 --> 00:01:12,670 so let's try giving that a shot. 19 00:01:12,710 --> 00:01:17,510 We're gonna make a separate component that's going to be dedicated to just showing one individual result 20 00:01:17,540 --> 00:01:23,210 by itself will then show that thing many times from inside of our flat list or more specifically from 21 00:01:23,210 --> 00:01:28,530 the render item function so inside my components directory I'm going to make a new file where I'm going 22 00:01:28,530 --> 00:01:31,200 to place this new reusable component. 23 00:01:31,200 --> 00:01:38,370 I'm going to call it results detail dot J.S. so the idea here is that we're giving some details about 24 00:01:38,550 --> 00:01:44,920 some very particular result then we'll put together our usual react component boilerplate inside of 25 00:01:44,920 --> 00:01:45,200 here. 26 00:01:45,220 --> 00:01:46,630 So we'll do it import react 27 00:01:49,740 --> 00:01:57,630 I'll get view image because I think we need to show an image text and style sheet from React Native 28 00:01:58,850 --> 00:02:07,500 I'll create my results detail and as usual for right now I'll return a View element that has a single 29 00:02:07,500 --> 00:02:12,140 piece of text inside of it and all of the text say something like results. 30 00:02:12,140 --> 00:02:19,740 Detail I'll then create my style object so can't styles is style sheet create. 31 00:02:19,960 --> 00:02:22,870 And then finally export default results. 32 00:02:22,900 --> 00:02:30,400 Detail OK so let's say this thing and we'll go back over to our results list file here's results list 33 00:02:30,820 --> 00:02:38,290 I'm going to import that new component at the top so I'll import results detail from results detail 34 00:02:40,030 --> 00:02:45,340 and then inside of our render item function rather than showing this simple text element I can replace 35 00:02:45,340 --> 00:02:48,700 it with results detail. 36 00:02:48,700 --> 00:02:53,200 So eventually we're gonna pass this thing a couple of props or more specifically probably the current 37 00:02:53,200 --> 00:02:58,300 result that we're iterating over and then the results detail can use that piece of information to decide 38 00:02:58,300 --> 00:03:00,230 how to customize itself. 39 00:03:00,340 --> 00:03:05,110 So I gotta say this and we're gonna make sure that we can see results detail up here many times. 40 00:03:05,260 --> 00:03:07,590 Yep definitely does. 41 00:03:07,620 --> 00:03:12,570 So now we can pass down the current results that we are iterating over which incited the render item 42 00:03:12,570 --> 00:03:16,110 function is item into our results detail. 43 00:03:16,110 --> 00:03:21,210 So as usual I'm going to make up a new prop name because this is a component we are creating. 44 00:03:21,210 --> 00:03:24,680 I think that using the name like results makes a lot of sense. 45 00:03:24,720 --> 00:03:26,370 So that's going to be a prop called results. 46 00:03:26,380 --> 00:03:27,530 We're gonna pass into it. 47 00:03:27,540 --> 00:03:34,390 The item that we're currently iterating over is I'll save this file we can then flip back over the results 48 00:03:34,390 --> 00:03:41,020 detail I will receive that prop called result and so result right here is going to be essentially my 49 00:03:41,020 --> 00:03:42,360 business object. 50 00:03:42,430 --> 00:03:47,140 It's gonna be that object that has all those different properties that we care about such as rating 51 00:03:47,140 --> 00:03:51,380 price name image your l and so on. 52 00:03:51,590 --> 00:03:57,360 So let's try once again to just print out the name of the business inside my text soulmate right here. 53 00:03:57,400 --> 00:04:06,090 I will remove results detail and replace it with result dot name save this again. 54 00:04:06,110 --> 00:04:10,170 Now it should be back to square one where we're just showing the name of the different restaurants we 55 00:04:10,170 --> 00:04:11,390 fetched yet. 56 00:04:11,400 --> 00:04:13,050 Looks pretty good. 57 00:04:13,050 --> 00:04:13,270 OK. 58 00:04:13,290 --> 00:04:18,240 So now that we've got this separate helper component we can start to customize it and add in a bunch 59 00:04:18,240 --> 00:04:23,460 more sex and styling to get something that looks way closer to our original markup over here. 60 00:04:23,460 --> 00:04:25,890 So let's start to add in all that styling in the next video.