1 00:00:01,300 --> 00:00:06,160 We can now navigate a user over to our results show screen remember the screen is going to be all about 2 00:00:06,160 --> 00:00:11,720 fetching a series of images again from the Yelp API and just rendering them out as a list to the user. 3 00:00:11,770 --> 00:00:18,220 So on the screen we now need to somehow know what business or what item right here a user actually tapped 4 00:00:18,220 --> 00:00:19,140 on. 5 00:00:19,150 --> 00:00:23,950 So if we can communicate that information over to the results show screen somehow then this screen can 6 00:00:23,950 --> 00:00:29,410 somehow make a request to the Yelp API and get some list of images as a quick reminder we could take 7 00:00:29,410 --> 00:00:32,460 a look at the Yelp api in order to get a list of images. 8 00:00:32,470 --> 00:00:35,520 We're going to make a request to that you are all right there. 9 00:00:35,530 --> 00:00:40,090 So on the very end of that you are URL we need to add the I.D. of the business that the user tapped 10 00:00:40,090 --> 00:00:40,960 on. 11 00:00:40,980 --> 00:00:43,110 So now this really turns into a big question. 12 00:00:43,270 --> 00:00:49,270 How do we somehow get the information about what business the user tapped on from results list over 13 00:00:49,270 --> 00:00:51,570 to results show screen. 14 00:00:51,580 --> 00:00:56,110 Well it turns out that when we call that navigate function we can essentially pass in a little bit of 15 00:00:56,110 --> 00:00:59,610 information that will be provided to the results show screen. 16 00:00:59,620 --> 00:01:04,990 So in short when we call navigate we're essentially going to form kind of a little information channel 17 00:01:04,990 --> 00:01:08,840 here in our results list is going to essentially tell results show screen. 18 00:01:08,890 --> 00:01:12,640 Here's the idea of the business to show. 19 00:01:13,450 --> 00:01:14,370 So that's what we need to do. 20 00:01:14,380 --> 00:01:19,660 We need to somehow form up that little link warming up that link is actually really easy and straightforward. 21 00:01:19,690 --> 00:01:25,280 We're going to go back to our results list component we're going to find where we call navigate so users 22 00:01:25,290 --> 00:01:28,890 navigate right here and we're just gonna pass in a second argument to it. 23 00:01:29,430 --> 00:01:33,780 So our second argument is gonna be an object that's going to be some information that we're going to 24 00:01:33,780 --> 00:01:36,510 communicate over to that other screen. 25 00:01:36,510 --> 00:01:41,490 In this case we probably just want to communicate the business's I.D. So inside of your output I.D. 26 00:01:41,950 --> 00:01:47,490 And we're going to get the I.D. out of our item remember item inside of the context of render item item 27 00:01:47,490 --> 00:01:51,210 is gonna be our actual results or the business object. 28 00:01:51,270 --> 00:01:55,450 So for I.D. right there we'll put in item dot I.D.. 29 00:01:55,610 --> 00:02:00,510 So now when our results show component is displayed it will have this extra little piece of information 30 00:02:00,540 --> 00:02:07,250 which is the idea of the business that it needs to show case we can save this file or then go back over 31 00:02:07,250 --> 00:02:08,960 to my results show screen. 32 00:02:08,960 --> 00:02:10,370 Here it is right here. 33 00:02:10,390 --> 00:02:15,710 So now we need to somehow get that little piece of information inside of this component to do so it 34 00:02:15,710 --> 00:02:18,590 is not added directly into our parameter object. 35 00:02:18,590 --> 00:02:23,960 Remember first me props object the props object is information communicated from a parent component 36 00:02:24,560 --> 00:02:29,270 in order to get that information inside of results show screen we're going to accept that. 37 00:02:29,270 --> 00:02:35,790 Navigate prop which remember is that big object with all those or I mean not navigate but navigation 38 00:02:36,120 --> 00:02:39,300 is that big object with all those different functions tied to it. 39 00:02:39,300 --> 00:02:41,370 And then on there there is a function. 40 00:02:41,370 --> 00:02:46,690 So navigation called Get param and we'll call it with I.D.. 41 00:02:46,770 --> 00:02:50,400 So this is how we're going to get some information out of that second argument that we called navigate 42 00:02:50,400 --> 00:02:51,230 with. 43 00:02:51,270 --> 00:02:56,490 So we call it get param and pass in the name of the parameter that we want we're using I.D. because 44 00:02:56,610 --> 00:03:01,490 back here inside of results list that second object had an I.D. property inside of it. 45 00:03:01,500 --> 00:03:06,490 So we're essentially saying give me that piece of information right there okay. 46 00:03:06,530 --> 00:03:12,240 So back inside of our results show screen I'm going to assign that to a variable like so and then I'll 47 00:03:12,240 --> 00:03:16,170 just do a quick console log to make sure that the idea is showing up successfully. 48 00:03:16,370 --> 00:03:21,740 So I going to save this put back over tap on a business and I should bill to go back with my terminal 49 00:03:23,280 --> 00:03:25,010 and see the I.D. up here. 50 00:03:25,080 --> 00:03:26,580 Yep there it is right there. 51 00:03:26,610 --> 00:03:27,070 Perfect. 52 00:03:27,540 --> 00:03:30,720 So that's how we're gonna communicate information from one screen to another. 53 00:03:30,720 --> 00:03:35,850 Anytime we're doing some amount of navigation now we have the I.D. we can take a quick pause and come 54 00:03:35,850 --> 00:03:40,020 back the next video we'll start to write out some logic to make a follow up request to Yelp and get 55 00:03:40,020 --> 00:03:43,590 a list of images to show inside of our results show screen.