Advanced React Patterns Toggle Component Solution
This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "Toggle Component Solution" Lesson
>> Kent C. Dodds: Okay, so we built a toggle component, and I'm going to work through the solution and then we'll go ahead and do the, your elaboration. And we'll move on. And you'll have time to ask questions and stuff too. Actually, before I start, does anybody have any questions? Wanna see the solution first, and then you will have questions, okay, good.
[00:00:22] So, I'm gonna go ahead and pop in this switch because that's what we're gonna be rendering. And the switch component, as documented here, it takes an on click and an on prop, so we're gonna need to pass on. I'm gonna put that in state and then on click.
[00:00:41] And I'm gonna call this toggle. I need to create those things, so let's do state equals on is false. And toggle is a bound function, arrow function, which actually doesn't have a binding. But anyway,this .setstate and we need previous state if we are gonna toggle we need to know what was the state before we are gonna use an updater function.
[00:01:07] And this is the current state and we will return an object with on is current state .on but negated toggle. And if you look at the usage this menu through in front of you because I don't think that I see yeah I guess I did talk about it a little bit.
[00:01:28] But we'll need to pass a call back to this that calls this .props.on_toggle with this .state.on. And with that all of your tests should be passing. And if you pull open the exercise now, [SOUND] it works just the same as the final version. All right, what questions do you have about this, yes?
>> Speaker 2: Do you have to use a state updater function?
>> Kent C. Dodds: Good question. So you could reasonably, say this.setState we'll just do this and this will this.state.on. Let's see, something like that. So I was gonna say that this works wait, static state, that's the super secret do-not-use-or-you-will-be-fired, just kidding.
[00:02:26] So yes, this actually does work in our case, the one thing that react does not guarantee, especially when async mode comes around, is that your, and actually even now, your set state could be batched. And so you don't have any control over what the state will be when this set state is processed.
[00:02:51] And so by providing an updater function it can pass you what the state is at the time that this set state call is being processed in the batching. So that you're actually referencing the current state.
>> Speaker 3: Would it be okay, so what I did is I captured the new on like in a variable above it and then referenced it, will that also be okay?
>> Kent C. Dodds: Yes, that'll be same as what we are doing. So, generally the rule is if you need to reference current states then you can update a function. If you don't then you can just use an object. If you don't like having complicated rules then just always use an updated function.
[00:03:34] Any other questions?
>> Kent C. Dodds: All right,well one of you did your job, no just kidding, no, thank you. I should probably double check. One thing that I didn't mention about thing is, something that I had have a lot of people ask me about in the past with regard to my workshops is, what file I'm I currently in.
[00:04:00] And so I made it enormous at the bottom here. It's kinda clipped off but that's the file that I mean. So whenever I'm in a file and you are like where is he, that's where I am. Okay cool, so let's go ahead and go to our test and make everything green.
[00:04:17] You can just copy and paste this and when you ran the setup you should have seen a little thing that said like what's your email address. You fill that out and it would actually prepopulate the Property on this URL. If that didn't work for you then you can actually run, and you don't have to do that.
[00:04:37] It just makes filling out these forms easier but you can run node scripts, autofill-feedback-email and it will ask for your email address. You fill that out and all of these will be pre-populated so you don't have to add your email address to the form. But in any case you pop this open take you to this feedback form.
[00:04:57] And please elaborate on what you learned.
>> Kent C. Dodds: This'll just be a couple of seconds, so we'll do this. When you're finished, go ahead and remove the .skip in front of this test. And then you should have all of your tests green. And you also have to change submitted from false to true.
[00:05:18] And then all your tests should be green. Okay, so somebody asked on the chat, could someone briefly explain what exactly the Stop, Props to Untoggle, this.stay.on does. So they're asking specifically this right here. And what this does is, this is a pretty common pattern in building React components.
[00:05:45] You have this component that manages its own state. But as a user of that component, I want to know when that state is changed. And so you provide a change handler and in our case it's an onToggle handler cuz this is a toggle component. And so our usage provides this onToggle handler and it's just defaulting to console.log.
[00:06:06] So if you go to the app and you pop-open your console every time you cook on it, it should tell you when the toggle is happening. So that's all this is doing is it's, once we have updated our state, we're going to say, hey, by the way, we updated our state.
[00:06:19] Just in case you wanted to know. And if you didn't wanna know, then why are you using this component. Because it's kinda useless on its own. Which is actually one of the reasons why we don't have a default props set for ontoggle. Because if you're using this without an ontoggle, then why are you using this at all?
[00:06:38] Okay, any other questions? What were some of the things that you mentioned in your elaboration? What did you learn?
>> Speaker 4: Nothing I mean I learned the same thing that question was about
>> Kent C. Dodds: Okay.
>> Speaker 4: Looking at your solution and then realizing that I shouldn't just be using an object.
>> Kent C. Dodds: Okay, yeah. So set state should be public and updated function when you're referencing current state. Cool.