Build a Toggle Component

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

Paul Binns
~ 6 years ago

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?

Kent C. Doddsinstructor
~ 6 years ago

Learn more here: https://egghead.io/lessons/javascript-public-class-fields-with-react-components

Kent C. Doddsinstructor
~ 6 years ago
Kent C. Doddsinstructor
~ 6 years ago
Kent C. Doddsinstructor
~ 6 years ago
Alexander Anich
~ 6 years ago

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.

Thein
~ 6 years ago

where is Switch Component?

Kent C. Doddsinstructor
~ 6 years ago

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.

Thein
~ 6 years ago

I got it from github html file. Thanks

Jack
~ 6 years ago

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.

sezar
~ 6 years ago

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.

Paul Binns
~ 6 years ago

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.

sezar
~ 6 years ago

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.

Paul Binns
~ 6 years ago

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.

Marcy Montross
~ 6 years ago

I really appreciate how succinct the lesson it. If I want a rambling lesson, I go to YouTube.

OMER
~ 5 years ago

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.

Shravan Dhar
~ 5 years ago

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 :)

Anton Bondarev
~ 4 years ago

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?