Check out a free preview of the full Advanced React Patterns course:
The "Prop Getters & Exercise" Lesson is part of the full, Advanced React Patterns course featured in this preview video. Here's what you'd learn in this lesson:

Kent discusses prop getters, which help fix overwriting properties that are intended to be overwritten by composing the properties that should be applied.

Get Unlimited Access Now

Transcript from the "Prop Getters & Exercise" Lesson

[00:00:00]
>> Actually that's really quick we'll just look at exercise five's usage and see the problem that prop getter solves. So why is this not enough? Well what would happen if I were to say, all right, so this button, I wanted to be a toggle button but I also have like analytics.

[00:00:20] And I wanna track whenever the user clicks on this button. So I'm gonna add an onClick or here we'll do just console log click. Okay we'll save that, we'll go over here, and we're getting that. Wait what? It's because I'm not clicking the right one. It was like doing the opposite of what I thought it was going to do.

[00:00:44] So, we're getting the click, awesome, but it's not toggling anymore. So who wants to volunteer to answer why did this happen?
>> You're overriding that.
>> Yeah, yeah I'm overriding the prop that I'm getting from toggle props. Okay simple fix. We'll just move that down, and there we go.

[00:01:03] I'm toggling sweet. Wait but my analytics aren't working anymore. I did the opposite problem. So, this is why prop collection or prop collections are great but this is why prop getters are a thing. So, here's how I would solve that or here's one way that I can solve that.

[00:01:20] So, I could say okay on click we are going to be that below and override it and then we'll call toggler props to on click and lets just forward all the arge's, wherever they are I don't care. Toggler props. And, there's my solution. This actually will work. Ta-da.

[00:01:42] So I'm getting both of my things happening. But as a user of this component, I don't like that. That's like super annoying, and it almost makes me think, well why do I even need the toggler process? What value is that thing giving me anyway? Well prop getter allows us to have our cake and eat it too sort of speak.

[00:02:03] Where instead of Instead of spreading an object, we actually call a function and that returns an object and we spread that. And the function accepts all the props that we want applied to the button. And then that function's job is to compose those props together. So that at the end results what we're spreading across the button are the props should be applied.

[00:02:28] And so the function can be in charge of applying the onClick both the custom onClick or onButtonClick as well as a onClick or the toggle function that it needs. And what's nice about this is let say that in the future we change from onClick to on key press or something like that then like this will continue to work.

[00:02:50] And the consumer of the API doesn't need to know the implementation details of what's happening under the hood. Whereas In this case, if we change it from onClick to onKeyPress now they have to go update our code to make that work. So that is togglerProps or that is a prop getters.

[00:03:12] And let's go ahead and do that Exercise. So to do this we're gonna run, I've got tests all over the place, let's reset --hard, and just clean myself up here. And we'll run, we'll comment this out, comment this in, run MTMT to run the test. And let's by the way, sometimes you'll see this giant red wall of text.

[00:03:40] And I'm sorry, blame JS dome. But yeah, we're getting a type error because get toggle props is not a function. You're supposed to make it. Okay, let's do that.