1 00:00:01,080 --> 00:00:02,400 ‫So let's now use 2 00:00:02,400 --> 00:00:06,180 ‫what we just learned about the key prop to our advantage 3 00:00:06,180 --> 00:00:08,583 ‫and fix our tabbed component. 4 00:00:10,140 --> 00:00:13,050 ‫So, as we have just explored previously, 5 00:00:13,050 --> 00:00:16,953 ‫as we change the state here in this tab component, 6 00:00:18,090 --> 00:00:23,090 ‫that state will be preserved as we re-render that component. 7 00:00:23,310 --> 00:00:26,820 ‫And so, again, that's because this component 8 00:00:26,820 --> 00:00:30,150 ‫is exactly of the same type as before, 9 00:00:30,150 --> 00:00:33,540 ‫so it stays the same element between renders, 10 00:00:33,540 --> 00:00:36,660 ‫and it also stays in the exact same place 11 00:00:36,660 --> 00:00:38,190 ‫in the component tree. 12 00:00:38,190 --> 00:00:42,390 ‫And so, therefore, its state is not reset. 13 00:00:42,390 --> 00:00:44,760 ‫It is only reset when we change 14 00:00:44,760 --> 00:00:47,520 ‫to a different component type here. 15 00:00:47,520 --> 00:00:51,810 ‫So now that's different content and then change back. 16 00:00:51,810 --> 00:00:55,440 ‫So now, in the meantime, our state was lost. 17 00:00:55,440 --> 00:00:58,200 ‫But if we do this and then change here, 18 00:00:58,200 --> 00:01:01,740 ‫then the state is preserved across renders. 19 00:01:01,740 --> 00:01:04,200 ‫Now, as we were saying also before, 20 00:01:04,200 --> 00:01:06,510 ‫this is usually not what we want. 21 00:01:06,510 --> 00:01:10,470 ‫And so, let's now use the key prop to change this. 22 00:01:10,470 --> 00:01:13,680 ‫And actually, it is extremely easy. 23 00:01:13,680 --> 00:01:17,250 ‫All we have to do is to give this tab content here 24 00:01:17,250 --> 00:01:21,870 ‫a different key for each of the tabs, basically. 25 00:01:21,870 --> 00:01:26,220 ‫So then each time that this tab content component here 26 00:01:26,220 --> 00:01:29,100 ‫is re-rendered, it'll get a different key. 27 00:01:29,100 --> 00:01:31,200 ‫And so then React will see it 28 00:01:31,200 --> 00:01:33,570 ‫as a unique component instance. 29 00:01:33,570 --> 00:01:36,990 ‫And therefore, then the old one will be destroyed, 30 00:01:36,990 --> 00:01:39,510 ‫and the state will be reset. 31 00:01:39,510 --> 00:01:43,050 ‫So just as we just learned in the previous lecture. 32 00:01:43,050 --> 00:01:44,553 ‫And so let's do that. 33 00:01:46,080 --> 00:01:50,280 ‫So let's give it a key that will change between renders. 34 00:01:50,280 --> 00:01:51,530 ‫So something unique here. 35 00:01:52,770 --> 00:01:54,070 ‫So, let's take 36 00:01:55,350 --> 00:01:58,470 ‫the content object again 37 00:01:58,470 --> 00:02:01,020 ‫at the current position, 38 00:02:01,020 --> 00:02:04,383 ‫and then let's, for example, take the summary. 39 00:02:06,450 --> 00:02:07,740 ‫All right. 40 00:02:07,740 --> 00:02:11,430 ‫So, here we do not have like a unique ID, 41 00:02:11,430 --> 00:02:14,940 ‫but we can see that the summary is always different. 42 00:02:14,940 --> 00:02:18,960 ‫And so, as soon as the tab content component 43 00:02:18,960 --> 00:02:20,790 ‫will be re-rendered, 44 00:02:20,790 --> 00:02:24,090 ‫then not only this item here will change 45 00:02:24,090 --> 00:02:25,530 ‫but also the key. 46 00:02:25,530 --> 00:02:27,840 ‫And so we are then in that situation 47 00:02:27,840 --> 00:02:30,660 ‫where the key changes across renders. 48 00:02:30,660 --> 00:02:34,620 ‫And again, that will then reset our state. 49 00:02:34,620 --> 00:02:36,510 ‫So let's hide this here. 50 00:02:36,510 --> 00:02:39,060 ‫Let's improve our likes. 51 00:02:39,060 --> 00:02:41,580 ‫And then let's go to another tab. 52 00:02:41,580 --> 00:02:43,860 ‫And beautiful. 53 00:02:43,860 --> 00:02:48,720 ‫So you see that our component state has indeed been reset. 54 00:02:48,720 --> 00:02:50,850 ‫And again, that's just because 55 00:02:50,850 --> 00:02:55,050 ‫React now views this as a completely different instance 56 00:02:55,050 --> 00:02:56,670 ‫of tab content. 57 00:02:56,670 --> 00:02:57,870 ‫And we can see that here 58 00:02:57,870 --> 00:03:01,470 ‫because now our dev tools display this key. 59 00:03:01,470 --> 00:03:04,620 ‫And when we move here, then we get another one. 60 00:03:04,620 --> 00:03:08,100 ‫And so, yeah, this is exactly how React 61 00:03:08,100 --> 00:03:11,640 ‫now makes each of these tab contents here unique 62 00:03:11,640 --> 00:03:13,323 ‫and distinguishes between them. 63 00:03:15,180 --> 00:03:16,013 ‫Yeah. 64 00:03:16,013 --> 00:03:18,690 ‫So this is really nice, really helpful. 65 00:03:18,690 --> 00:03:22,560 ‫And so you really need to understand what just happened here 66 00:03:22,560 --> 00:03:26,490 ‫and then keep it in mind for future situations. 67 00:03:26,490 --> 00:03:30,120 ‫So I actually still remember personally when I first learned 68 00:03:30,120 --> 00:03:33,930 ‫about the power of the key prop here. 69 00:03:33,930 --> 00:03:38,070 ‫So this was actually a key learning moment for me. 70 00:03:38,070 --> 00:03:40,590 ‫So it was really eye-opening. 71 00:03:40,590 --> 00:03:42,540 ‫And so I hope I could provide 72 00:03:42,540 --> 00:03:45,300 ‫the same experience here for you. 73 00:03:45,300 --> 00:03:48,390 ‫So this key prop here, it looks very simple 74 00:03:48,390 --> 00:03:50,970 ‫but it can make a huge difference. 75 00:03:50,970 --> 00:03:54,300 ‫And so let's now actually also use this key prop 76 00:03:54,300 --> 00:03:57,510 ‫in the eat and split up that we built before. 77 00:03:57,510 --> 00:03:59,853 ‫So let's do that in the next video.