‫So let's now use
‫what we just learned about the key prop to our advantage
‫and fix our tabbed component.
‫So, as we have just explored previously,
‫as we change the state here in this tab component,
‫that state will be preserved as we re-render that component.
‫And so, again, that's because this component
‫is exactly of the same type as before,
‫so it stays the same element between renders,
‫and it also stays in the exact same place
‫in the component tree.
‫And so, therefore, its state is not reset.
‫It is only reset when we change
‫to a different component type here.
‫So now that's different content and then change back.
‫So now, in the meantime, our state was lost.
‫But if we do this and then change here,
‫then the state is preserved across renders.
‫Now, as we were saying also before,
‫this is usually not what we want.
‫And so, let's now use the key prop to change this.
‫And actually, it is extremely easy.
‫All we have to do is to give this tab content here
‫a different key for each of the tabs, basically.
‫So then each time that this tab content component here
‫is re-rendered, it'll get a different key.
‫And so then React will see it
‫as a unique component instance.
‫And therefore, then the old one will be destroyed,
‫and the state will be reset.
‫So just as we just learned in the previous lecture.
‫And so let's do that.
‫So let's give it a key that will change between renders.
‫So something unique here.
‫So, let's take
‫the content object again
‫at the current position,
‫and then let's, for example, take the summary.
‫All right.
‫So, here we do not have like a unique ID,
‫but we can see that the summary is always different.
‫And so, as soon as the tab content component
‫will be re-rendered,
‫then not only this item here will change
‫but also the key.
‫And so we are then in that situation
‫where the key changes across renders.
‫And again, that will then reset our state.
‫So let's hide this here.
‫Let's improve our likes.
‫And then let's go to another tab.
‫And beautiful.
‫So you see that our component state has indeed been reset.
‫And again, that's just because
‫React now views this as a completely different instance
‫of tab content.
‫And we can see that here
‫because now our dev tools display this key.
‫And when we move here, then we get another one.
‫And so, yeah, this is exactly how React
‫now makes each of these tab contents here unique
‫and distinguishes between them.
‫Yeah.
‫So this is really nice, really helpful.
‫And so you really need to understand what just happened here
‫and then keep it in mind for future situations.
‫So I actually still remember personally when I first learned
‫about the power of the key prop here.
‫So this was actually a key learning moment for me.
‫So it was really eye-opening.
‫And so I hope I could provide
‫the same experience here for you.
‫So this key prop here, it looks very simple
‫but it can make a huge difference.
‫And so let's now actually also use this key prop
‫in the eat and split up that we built before.
‫So let's do that in the next video.