1 00:00:00,890 --> 00:00:05,270 In the last section we were able to print out the currently selected song from our song detail component 2 00:00:05,420 --> 00:00:07,850 by hooking up the connect function to it. 3 00:00:07,880 --> 00:00:13,370 So now we need to somehow customize what the song detail is going to render out based upon the song 4 00:00:13,400 --> 00:00:15,020 inside that props object. 5 00:00:15,020 --> 00:00:20,960 Now before we do one quick thing I want mention though to set our props object has a key of song and 6 00:00:20,960 --> 00:00:24,500 the song has a value of the actual song object right there. 7 00:00:24,500 --> 00:00:30,080 We see the key of song right there only because that is what we had returned from our map state to prop's 8 00:00:30,080 --> 00:00:31,070 function. 9 00:00:31,070 --> 00:00:35,720 So right here is an object that says song that key right there is where this entire object I should 10 00:00:35,720 --> 00:00:40,490 say is what is going to eventually show up as our props object inside the component. 11 00:00:40,490 --> 00:00:45,970 So if we wanted to we could rename that key right there to something like my selected song. 12 00:00:46,370 --> 00:00:51,530 And then if I saved this and foot back over you'll see that the props object has now changed and it 13 00:00:51,530 --> 00:00:53,380 now says my selected song. 14 00:00:53,540 --> 00:00:55,780 And when I actually select a song yet there we go. 15 00:00:57,250 --> 00:00:57,690 All right. 16 00:00:57,790 --> 00:01:01,320 So if you ever want to customize the key that shows up inside your props object. 17 00:01:01,330 --> 00:01:03,540 You do it right here inside a map state to props. 18 00:01:03,550 --> 00:01:08,460 But for us having simply a song like so is totally appropriate for what we are doing. 19 00:01:08,510 --> 00:01:14,620 OK so now back inside of our component itself I'm going to move the console log now inside of here. 20 00:01:14,620 --> 00:01:18,050 I don't really want to have to refer to prop stot song title. 21 00:01:18,100 --> 00:01:18,710 A whole bunch. 22 00:01:18,730 --> 00:01:22,630 And then like you know props start song duration over and over again. 23 00:01:22,660 --> 00:01:28,720 So instead of receiving the entire props object I'm going to structure out just the property we care 24 00:01:28,720 --> 00:01:33,150 about just the song property like the it's now inside of here. 25 00:01:33,300 --> 00:01:39,480 I should be able to reference song title and see the title of the song printed on the screen. 26 00:01:39,480 --> 00:01:43,740 So if I now flip back over I'm going to see an error message. 27 00:01:43,740 --> 00:01:44,040 All right. 28 00:01:44,040 --> 00:01:46,050 So cannot read property title of No. 29 00:01:46,200 --> 00:01:47,280 Why are we seeing this. 30 00:01:47,430 --> 00:01:53,690 Well remember when we first render out our component on the screen we do not yet have a selected song. 31 00:01:53,850 --> 00:01:59,020 And in fact the selected song Piece of state inside of a redux store starts off as no. 32 00:01:59,340 --> 00:02:03,990 So we're trying to read the property title on a value of NULL to fix this. 33 00:02:04,020 --> 00:02:09,120 All we have to do is add in a little check inside of our component. 34 00:02:09,120 --> 00:02:13,870 I'm going to say if song does not yet exist or if it's a null value. 35 00:02:13,890 --> 00:02:15,840 So notice the exclamation right there. 36 00:02:15,840 --> 00:02:22,320 Then I want to return something that tells the user that they need to select something in order to actually 37 00:02:22,320 --> 00:02:24,050 see some content appear on the screen. 38 00:02:24,320 --> 00:02:33,280 So I'll say something like select a song like so now if I flip back over the air goes away and I see 39 00:02:33,310 --> 00:02:34,330 select a song. 40 00:02:34,350 --> 00:02:38,590 And so now my user knows that they need to actually click on something and then we can show out the 41 00:02:38,590 --> 00:02:40,110 actual title of that song. 42 00:02:41,250 --> 00:02:46,200 And I can select another one and see all the different titles appear cool. 43 00:02:46,290 --> 00:02:50,460 All right so now we're going to improve the styling of this component just a little bit. 44 00:02:50,700 --> 00:02:55,710 So I going to turn this into a multi line GSX expression as we've done many times before. 45 00:02:55,740 --> 00:02:59,020 Don't forget to clean up the semi-colon on the end of that line. 46 00:03:00,120 --> 00:03:04,510 And then I'll give myself a little bit of space here. 47 00:03:04,520 --> 00:03:09,670 All right so on the Stiv I'm going to put on a class name of actually you know class name here. 48 00:03:09,680 --> 00:03:10,340 I take that back. 49 00:03:10,340 --> 00:03:13,550 We don't need a custom here we're going to put that class name somewhere else. 50 00:03:13,550 --> 00:03:19,840 So at the top I'll put in H three and all say details for. 51 00:03:19,970 --> 00:03:29,610 And then after that I'll put a simple P-TECH and I'll say title I'll put my song title in there like 52 00:03:29,610 --> 00:03:33,790 so and then how about right after that we'll put 53 00:03:37,320 --> 00:03:43,980 our duration and I'll do a song that duration. 54 00:03:43,990 --> 00:03:45,360 All right so it looks pretty good. 55 00:03:45,730 --> 00:03:48,070 Let's try flipping back over and see how we're doing. 56 00:03:48,490 --> 00:03:48,680 Yes. 57 00:03:48,700 --> 00:03:54,700 And now by default I select a song if I click on select it says details for and it's kind of scrunching 58 00:03:54,700 --> 00:04:00,220 up the title and duration together so I can either wrap these in separate tax or get put in a simple 59 00:04:00,250 --> 00:04:04,740 break line like so now they should render on separate lines. 60 00:04:04,760 --> 00:04:05,240 There we go. 61 00:04:05,270 --> 00:04:09,560 So I've got my title and my duration right after it and I could select all these different songs and 62 00:04:09,560 --> 00:04:13,110 see details about the appropriate song appear on the screen. 63 00:04:13,110 --> 00:04:13,360 All right. 64 00:04:13,380 --> 00:04:14,590 This looks pretty great. 65 00:04:15,570 --> 00:04:19,070 So that's pretty much it for how we integrate react in redux together. 66 00:04:19,260 --> 00:04:23,610 The big lesson here is that we're still going to create our components as we usually do. 67 00:04:23,610 --> 00:04:28,890 We're going to then select some very specific components inside of our application that need to receive 68 00:04:28,890 --> 00:04:34,440 some information or need to make changes to our state if we need to make changes to our state or receive 69 00:04:34,440 --> 00:04:35,260 information. 70 00:04:35,310 --> 00:04:40,920 We're going to import that connect helper and then at the bottom of the file we can define a map state 71 00:04:40,920 --> 00:04:47,160 to prop's function will then pass that function as the first argument after connect and it'll put on 72 00:04:47,160 --> 00:04:53,150 this kind of weird syntax here where we put the song detail or the actual component that we care about 73 00:04:53,460 --> 00:04:57,160 as a second function call next to the connect call. 74 00:04:57,170 --> 00:05:01,490 Now in total I would say that this application was of course pretty simple and basic. 75 00:05:01,640 --> 00:05:02,960 So let's take a pause here. 76 00:05:02,990 --> 00:05:08,150 We're going to do an exercise or two in the next video and then after that we're going to very quickly 77 00:05:08,300 --> 00:05:11,830 start to work on some much more complicated redux applications. 78 00:05:11,930 --> 00:05:13,830 So quick break and I'll see you in just a minute.