Build a Toggle Component

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

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. It is important to define default props when you are calling a method from props.

Instructor: [00:00] We're rendering this switch component. We can change this from false to true to turn it on and then back to false to turn it off. But we want to be able to click on it to toggle that state. We need to keep that state somewhere and update the on state.

[00:12] Let's go ahead and make a React component called toggle. Here we'll move this return statement to that. We'll render toggle instead. So far, that gets us exactly what we had before. Now we need to store that state somewhere. We'll say state on is false to initialize that. Then we'll get the state of on from this.state. We'll put on in here.

[00:37] Then we need a way to update that state. We'll make a toggle function here. That will call this.set state. We need to know what the on state currently is so that we can toggle it off. Then, in our switch component, we'll add an on click. This will pass in this.toggle. With that, we can click. It toggles on and off.

[01:03] Finally, just to make things a little bit more extensible, we're going to add a callback function here that will call this.props.on toggle with this.state.on. With that, we can add on toggle equals on alert on. We get true and false.

[01:25] One last thing, since we added this on toggle prop, if we go ahead and remove that and then try to click, it breaks our entire app. That's because it's calling a function that doesn't exist. Let's go ahead and add...thetic default props on toggle is just an empty function that does nothing. Now if we click this, it still works. But nobody knows that the toggle is changed.

[01:50] We're going to go ahead and add on toggle with on console.log toggle on. Now if we pull up our dev tools, we get that logged to the console...

Rajkumar
Rajkumar
~ 5 years ago

Way too fast for me, let me try in 0.85 speed, hopefully I will be able to follow along.

James
James
~ 5 years ago

Yup. Too fast. If you expect people to fully understand the patterns you're using, it's pretty important you explain the patterns as you go, especially in the early videos.

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

Feel free to watch it on a slower speed 😀 Having a solid grasp on React is a prerequisite for this course. If a lesson where we build a simple toggle component is a struggle for you, the concepts in future lessons will probably be more so I'm afraid.

Bharat
Bharat
~ 5 years ago

I have the following questions on the section that you have below the main body of the code commented as "irrelevant implementation details":

  1. why do you have an input inside the div with className="toggle"? As far as I can see, it does nothing.
  2. Your Switch function that is used as a react component has className and ...props as parameters, but when it is called from 'relevant' code, it does nothing, i.e., you send in no className argument or any other argument for that matter.

Am I reading too much into irrelevant details?

Thanks. and I really liked your Basic course. I went through it twice :)

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago
  1. ...

Yes, you're correct. As I was refactoring while making the material, it looks like I forgot to remove the unnecessary class name.

  1. ...

Correct again.

Am I reading too much into irrelevant details?

Yes 😀

Thanks. and I really liked your Basic course. I went through it twice :)

I'm glad!

Fabricio
Fabricio
~ 5 years ago

Beautiful course! Thanks a lot.

Quick question: I copy pasted the code example to WebStorm and in the id attribute of the root DOM element there is a strange character after the react emoji (⚛): http://jmp.sh/nB5Uip6 <- screenshot

If I take it off the app breaks with the error "Uncaught Error: Target container is not a DOM element."

Any idea why this happens?

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

Hey Fabricio, The error is saying that when document.getElementById('⚛️') is run, it returns null so you're trying to render to null. That happens when you remove the id prop from the HTML. Looks like webstorm doesn't like emoji I guess. You could change it to anything else (root for example) and that would work just as well. See the first lesson from my beginner's course for more info 👍 Good luck!

Fabricio
Fabricio
~ 5 years ago

Hey Kent,

Looks like webstorm doesn't like emoji I guess.

Indeed it does not. Thanks for the prompt reply. I just thought you may have some insight about using emojis as identifiers in html. When I saw: ⚛️ as an id I said "What? wow... cool!".

Your lessons in this course are great. Thank you so much for them, sir.

Frank Schiller
Frank Schiller
~ 4 years ago

So since static defaultProps = {onToggle: () => {}} prevents the application from crashing and the function itself does nothing. Does the static defaultProps in this example serve any purpose other than being a reference to this.props.onToggle(this.state.on)? I get this is necessary in order to console.log the toggle on/off status but is there another way to achieve the same result instead of creating a function that does nothing?

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

Hi Frank

Yeah, you could also do:

if (this.props.onToggle) {
  this.props.onToggle(this.state.on)
}
Frank Schiller
Frank Schiller
~ 4 years ago

Awesome, thank you very much for the quick response! I loved your intro course for React, can’t wait to dig through all of this one 👍🏻