1 00:00:00,150 --> 00:00:07,800 Amazing work, we can display our tour's list now let's work on the toggle functionality, or at the 2 00:00:07,800 --> 00:00:10,550 moment, of course, we're displaying the full info. 3 00:00:10,920 --> 00:00:19,380 However, what I would want to do is to add a button where by default I only display part of the info, 4 00:00:19,620 --> 00:00:27,510 and then if the user chooses to see the full info, he or she presses read more like so. 5 00:00:27,760 --> 00:00:34,420 And then of course we can see the form for how or there's the option of going to default where progress 6 00:00:34,420 --> 00:00:36,470 us on the show was. 7 00:00:36,750 --> 00:00:43,230 So first, we'll start by setting up some kind of straight volume and here I'm going to go and read 8 00:00:43,230 --> 00:00:43,630 more. 9 00:00:43,650 --> 00:00:51,390 Again, that is just my name and of course the function of set and then read more and by default also 10 00:00:51,570 --> 00:00:53,010 equal to Paphos. 11 00:00:53,760 --> 00:00:55,490 So by default is going to be false. 12 00:00:56,010 --> 00:01:03,330 And once I have my stage value now where we have the info, we would need to set up a conditional rendering 13 00:01:03,540 --> 00:01:07,170 where at the moment, yeah, I'm saying I would just want to display the full info. 14 00:01:07,200 --> 00:01:17,940 However, since I have my stage value, what I could do instead is say if the read more is true, then 15 00:01:17,940 --> 00:01:19,400 I would want to display the info. 16 00:01:19,680 --> 00:01:19,960 How? 17 00:01:20,020 --> 00:01:25,200 However, if it is not so right after the column, then I would want to do something else. 18 00:01:25,570 --> 00:01:32,790 Now, since I'll have to add a little bit more functionality, I will need to set up or here the template 19 00:01:32,790 --> 00:01:33,240 strand. 20 00:01:33,660 --> 00:01:41,730 Then I'll set up my expression and we're going to go it in full and then sub string like so. 21 00:01:42,570 --> 00:01:49,140 And of course, that is the function that just gets part of the string and we start with zero, so start 22 00:01:49,140 --> 00:01:54,090 with zero and then comma and then how much text you want to display. 23 00:01:54,390 --> 00:01:56,580 So in my case, I go two hundred. 24 00:01:56,940 --> 00:02:00,080 But of course you can choose your own value. 25 00:02:00,390 --> 00:02:02,830 And then in here, let's just add that. 26 00:02:03,180 --> 00:02:08,100 So again, what is happening right now is we have the state value. 27 00:02:08,490 --> 00:02:12,360 A name is read more and by default it is false. 28 00:02:12,870 --> 00:02:18,930 And that in a paragraph, instead of just displaying the whole info, I'm saying, hey, listen, is 29 00:02:18,930 --> 00:02:20,410 read more true. 30 00:02:21,000 --> 00:02:25,260 So if it is going to be true, then yes, we will display the full info. 31 00:02:25,650 --> 00:02:35,520 However, if the read more is not true, then I'm going to look for info and then I'll run my substring 32 00:02:35,520 --> 00:02:37,170 method because it is a strength. 33 00:02:37,470 --> 00:02:43,250 And I'll just say, you know what, show the two hundred characters instead. 34 00:02:43,860 --> 00:02:51,780 And of course since the all by default is false, that's why we see the short version of the info. 35 00:02:52,110 --> 00:02:59,160 If we set it equal to true, you'll notice that essentially we're back to the previous setup where we 36 00:02:59,160 --> 00:03:00,840 just display the full info. 37 00:03:01,290 --> 00:03:02,530 So that's step number one. 38 00:03:02,940 --> 00:03:09,160 Now, the second thing inside of the paragraph, I would want to set up a button that toggles that volume. 39 00:03:09,480 --> 00:03:16,710 So in here, let's go with a button, then we'll set up right away on click and we'll pass, of course, 40 00:03:16,740 --> 00:03:20,640 the inline function and we'll say set or read more. 41 00:03:21,030 --> 00:03:27,270 And now the interesting thing is, since I would want to toggle the value of read more, I just need 42 00:03:27,270 --> 00:03:30,800 to go with my important and then read more. 43 00:03:31,080 --> 00:03:38,400 And essentially what that means is whatever is going to be a value, I will pass and the opposite. 44 00:03:38,760 --> 00:03:44,220 So if the moment it is true, the first time I click, of course my value will be false. 45 00:03:44,520 --> 00:03:49,590 The next time I click, of course, it's going to turn back from the force to a. 46 00:03:50,280 --> 00:03:52,470 So this is how essentially we're talking. 47 00:03:52,770 --> 00:03:58,680 And as far as the name in my button, well I also want to change it. 48 00:03:58,680 --> 00:03:59,100 Correct. 49 00:03:59,370 --> 00:04:03,660 Because in one case this is going to be read more and than in the other case it's going to be. 50 00:04:03,810 --> 00:04:04,850 Show us. 51 00:04:05,190 --> 00:04:06,300 So here's what we could do. 52 00:04:06,570 --> 00:04:10,380 I could say read more again, I'm checking my state value. 53 00:04:10,650 --> 00:04:15,240 And if it is true, then of course, I know that I'm displaying the full info. 54 00:04:15,570 --> 00:04:16,040 Correct. 55 00:04:16,350 --> 00:04:19,300 So that way I know that you know what I'll display. 56 00:04:19,440 --> 00:04:21,600 Show us inside of the bottom. 57 00:04:21,930 --> 00:04:22,530 How are. 58 00:04:23,450 --> 00:04:31,880 If the value is false, then, of course, I know that the name and a button should be read more so. 59 00:04:31,920 --> 00:04:34,130 And here we go with Read More. 60 00:04:34,490 --> 00:04:41,780 So I'll say it by default, I'll hide the info, meaning not all of it, but at least most of it. 61 00:04:41,960 --> 00:04:44,920 And now I have my read more button. 62 00:04:45,290 --> 00:04:50,310 So once I click the button, then of course I'm changing the state value and then I'm also changing. 63 00:04:50,330 --> 00:04:52,330 Well, what am I displaying on here? 64 00:04:52,580 --> 00:04:59,960 And I think this would be a good use case where we go to a react developer tools just search and see 65 00:04:59,960 --> 00:05:00,860 everything in action. 66 00:05:01,160 --> 00:05:02,140 So I'm looking forward to. 67 00:05:03,160 --> 00:05:07,820 The first one, and of course, these are my props and notice how the value is false. 68 00:05:08,110 --> 00:05:11,940 So the first time I click and of course the value is true. 69 00:05:12,220 --> 00:05:17,630 And then since I set up my conditional rendering, Nevarez, now I'm displaying the full info. 70 00:05:17,950 --> 00:05:19,970 Now, the next time, I'll click on a button. 71 00:05:20,410 --> 00:05:26,800 Now, of course, not only I'll display only part of the text, but also the text inside of the button 72 00:05:26,800 --> 00:05:27,340 will change. 73 00:05:27,670 --> 00:05:34,690 So once I click again, state values false and the button says, Read more and I'm only displaying the 74 00:05:34,690 --> 00:05:36,400 part of the text.