This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "Control Props Primer & Exercise" Lesson
[00:00:00]
>> Kent: And we're gonna open the primer. So this next one is a big enough topic that combining it with the current solution was a little bit much. And so we're gonna do a primer first and then we'll have you go into the final exercise. Or into integrating the concept with the rest of the component and so we'll do this like a normal exercise.
[00:00:26] We'll do the primer and then I'll do the solution, so you can ask any questions then, we'll let you combine it with the existing toggle component. But yeah, so this is vastly simplified. It's not using render prompts, it's not using a state reducer, it's rendering its own thing.
[00:00:43] But let's talk really quick about what this thing even is, why we even care about it. So if we go to this, our objective is to get two totally separate components to synchronize their state. And, so in the exercise they're not synchronizing, which is sad. So the way that this works, from a user standpoint is we have this usage and we have this bothOn property.
[00:01:16] And in here, whenever one of these things toggles we call handleToggle and it will set both on to whatever the value is. So I click on this one it turns them both on, I click on this one it turns them both off. So which ever one changed most recently is the state for both of them, and, yeah, ignore the toggle ref stuff.
[00:01:38] This is just stuff from my for the test so implementation details for the test. But the key difference here between the existing toggle component is that we now have an on prop and this is the control prop. So how many people are familiar with controlled inputs or controlled form elemnts?
[00:02:00] Okay great, this is it, that's what it is. We're implementing that pattern here. So, if you add a value property to an input, you get an error message in the console. Okay, what does that say? You don't have to say it verbatim, I know I've memorized all the error message, but you don't have to.
[00:02:18]
>> [LAUGH]
>> Kent: Just kidding, no it says you're controlling an input, but not providing an onChange. So it's read only, the value will never change. The user can type in it as much as they want, nothing is gonna happen because you've taken control of the value of that input.
[00:02:40] And then the onChange prop is there to make suggestions to you to say hey, based off of the way my inner workings work, how I update my state when I'm in control ,this is what I'd suggest you update your state toBe. But you do it whatever you want to.
[00:02:55] So you can uppercase the string, you do whatever else you wanna do with that. That's where we're implementing for the toggle component. We say, hey, so, I control this on state internally and whenever the user clicks on that toggle or that switch, I update that on state to be the opposite of what it was before.
[00:03:17] So that's what I would do, but you can do whatever you want with that. And so in our case, whatever we want is to update, when this handle toggle is called we update it to be whatever that is, and then we re render it to have the state we want it to.
[00:03:36] So, like in Angular 1 land this would be like two way binding and that was the demo that caught us all. My goodness that wasn't even any code, it was just template stuff. So, this is like implementing two way binding in this particular example by allowing for this prompt to be passed to control that state.
[00:03:59] So, let's go ahead and take a look at the implementation and get this written out. And you're gonna add a function called isOnControlled. You're gonna add a function called getState because now state can either come from props, or it can come from state. It's gonna come from one or the other not both, do not try to synchronize state and props, it's not a good idea.
[00:04:23] Just get it from one or the other and then inside of toggle, if it's controlled then you should just call onToggle, don't try to call setState cuz you don't need to set state if it's controlled, you're not managing it yourself anyway. It could cause unnecessary re-render. And then if it's not controlled, then you can keep doing what we've always been doing.
[00:04:45] And then here you wanna get state from the getState method, because now that state can come from props or state. So okay, I'll let you off on that, we'll run npm t and swap these two in here. By the way, the test that you find in this repo, some of them are good tests and some of them are very bad tests.
[00:05:10] And I would never recommend that you write tests like this for your react components, cuz lots of these are testing your implementation details cuz I'm testing your implementation, right? So, come to my workshops in the next couple of days to learn more about that. But I forgot to mention that cuz some people are gonna be like, this is how I should test stuff.
[00:05:27] No, please don't.