Build a Toggle Component
In this lesson, we’ll write a simple toggle component which will serve as the foundation for the rest of the course. Kent walks through how to create a simple toggle with React setState. He shows us how to extend the functionality of the toggle by safely adding an onToggle prop that gets called after state is updated.
Instructor: [00:00] Let's go ahead and build this toggle component that we're trying to render here, so that I can toggle back and forth. First off, we're going to need to have stateNatWillBeOn as false. The switch component accepts an On prop, so we'll say this.State.On.
[00:17] Then we could initialize this to true. That will switch it up to true, but we'll start it out as false.
[00:24] We'll also need to pass an onClick, and we'll pass this.Toggle. Toggle will be this arrow function that calls this.setState.
[00:34] We need to know what the current state is so that we can update On to be not the current state.On. Cool, now we can toggle it back and forth. Let's go ahead and call the onToggle prop that they're passing us.
[00:47] As a callback, we'll call this.props.onToggle, this.State.On. Now we can toggle that back and forth. If we check out our console, we'll see that getting along properly.
[01:00] In quick review, to create this component, we rendered the switch with the On and onClick. The On is being managed by the toggle component itself in state, then onClick, the toggle method, will update the state accordingly.
[01:14] I'm going to go ahead and refactor this to destructure the current state, so we just grab the On here, and it works just as well.
Learn more here: https://egghead.io/lessons/javascript-public-class-fields-with-react-components
Was there a prior video to this that was cut? It seems like the development abruptly starts during this first video.
EDIT: I found the source from your github repo. It would be great if this link was included in the summary! Thank you for your great work, btw.
where is Switch Component?
Hi Thein, It's in another file because it's implementation isn't relevant to the lesson. Checkout the files in the codesandbox embed below the video.
I got it from github html file. Thanks
Very lazy start to this course. You don't even mention that there are required files elsewhere. C'mon man, this is a premium course.
Very lazy start to this course. You don't even mention that there are required files elsewhere. C'mon man, this is a premium course.
@Jack I fully agree...
Its my first month on EggHead and almost (not all) every single course I have watched this far is like that... I personally don't feel its worth my money to renew.
Interesting you guys see it this way. IMO you only need to go through this experience once on egghead. After that you will hopefully come to appreciate that egghead provides the most concise and to the point (not to mention the highest quality) tutorials available on the internet. It is this very lack of repetitive pointless fluff that makes this site so attractive to me. I should also mention that the code for all the tutorials is almost always available on the actual page that the video shows, so I can only imagine that you guys didn't scroll all the way down.
lol, yes, I know to scroll down and its either embedded or a link to GitHub is provided... that is not my point.
I agree with you, I do like all the videos I have watched so far. I didn't mean to imply that this or any course that I have watched were low quality.
I guess I personally like this "repetitive pointless fluff" in the beginning of a course.
You might be right though, I still have few more weeks and I love learning so I'll be watching a lot more courses. Maybe I'll change how I approach learning in egghead and appreciate it like you said.
In a way I think egghead is subtly trying to impress upon us the principles of: DRY (don't repeat yourself), and; Keep your code (and your pedagogy ;-) ) as lean and as minimal as is required for people to be able to work with it.
I really appreciate how succinct the lesson it. If I want a rambling lesson, I go to YouTube.
Tells me NOTHING about the setup environment. The code in github does not compile, error about @babel/core@7.0.0-beta.34. This is the first time I've downloaded a code from github from an instructor that fails to install the required components. The code in the codepen shows the lecture outlines, there is no toggle class that he starts to type in. I can do all of this with a little bit of time, but what an AWFUL experience to start a class. I don't think I will be going for his personal js testing library, I wonder what surprises are there. I feel like I dodged a bullet there.
The guys complainng about "where the files are" or the "code is not compiling" forgot to read the "Advanced" word from the title "Advanced React Patterns". The author's intention is to not dwell in the trivial setup details and keep the video concise. Learn the concept so the you can apply it at other places :)
Hi, Kent! Great course! Could you please explain or give me a reference to why it's possible to define the function onToggle not in a function body but in the signature of the function Usage?
Hi Kent, could you please explain what is happening with your code to allow the use of state and methods in ES6 classes without constructor and method 'this' binding?