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. 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...
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.
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.
I have the following questions on the section that you have below the main body of the code commented as "irrelevant implementation details":
- why do you have an input inside the div with className="toggle"? As far as I can see, it does nothing.
- 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 :)
- ...
Yes, you're correct. As I was refactoring while making the material, it looks like I forgot to remove the unnecessary class name.
- ...
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!
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?
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!
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.
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?
Hi Frank
Yeah, you could also do:
if (this.props.onToggle) {
this.props.onToggle(this.state.on)
}
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 👍🏻
Way too fast for me, let me try in 0.85 speed, hopefully I will be able to follow along.