In this video, I'm going to demonstrate how to toggle the value of a Boolean state variable using user triggered events. And how to handle multiple events on a single JSX element. In the example that you'll explore next, the code consists of another example of a component than what you've been used to so far in the course. The aim is to demonstrates how all the event handling concepts work together with state, styling, and the use of turning the expressions. Let's say that you have a component that uses state to keep a Boolean value of dark mode on. Based on whether the value of this variable is true or false, your component will render an H1 heading with some text in it. Either as a dark theme or as a light theme. Additionally, it's possible to switch the theme with a button click. Now, let's continue with an in depth demonstration of event handling. I'm going to demonstrate event handling with an example so that you can gain practical insight into the use of events to provide additional functionality to an app. I'm going to build a component and I'll name it mode toddler. So, in the Explorer Sidebar in VS code, I right click the source folder and click the new file command. I name the file ModeToggler. And for now, it's an empty function declaration with a default export. I press control S or command S on a mac to save my updates. Back in the app component, I update its return statements to render this new ModeToggler component. I also need to import it online one of the app component and save the changes to app JS. I now return some JSX code from my ModeToggler component and add a return statement. In this statement, a JSX expression wraps the turner in which checks if the value of dark mode on is true or false. If it's true, it will return whatever restored in the dark mode value. And if it's false, it will return whatever stored in the light mode value. However, I don't have the values I'm evaluating yet. So, if I say this code now it throws an error. Instead I define these values by declaring three variables above the return statements. These are dark mode on, which holds a value of true, dark mode which holds the text. Dark mode is on in an H one header and light mode which holds the text. Light mode is on in an H one header. I save my changes and I get the sentence. Dark mode is on in the browser. Let me explain what happened here. The dark mode on variable is set to true. Just to do a quick test, I can change the variable name of dark mode on in the turn array to the value of true. Since this value is true, the value that's stored in dark mode will be rendered. If I change the value of true to false, the value that's stored in light mode will be displayed. I have replaced the test word false with our const dark mode on. And now I'll save it and test it again. Now, I get the light mode is on displayed on the screen. I add a button with the on click events to handle this toggle of the value of the dark mode on, variable from true to false. So, under this turner restatement I'll add a button with an on click event handler. I'll also define the handle click function. I start my function by taking the value of dark mode on, and change it to the opposite Boolean value using the exclamation mark. That is the not operator. I then assign this value as the new value of the dark mode on variable. To explain this a bit more, if the value of dark mode on was for example true, then the not dark mode on will be evaluated to not true. This not true will be assigned to the dark mode on variable, thus becoming false. I now add to the rest of the code for the handle click function, which is an if statement. The logic states that if the dark mode on is set to true, then console log dark mode is on otherwise console log light mode is on. I could have perhaps written this code a bit differently, but I wrote it in a way that makes it obvious what is happening here. This is always good practice for a developer of any skill level, so that they and others can easily examine the code at a later stage. I save. And once my app re compiles, if I click the click me button, I get the appropriate string output in the console. This brings me to an interesting conclusion. Although the console log is updating, there are no changes to the actual heading one on the screen. Of course, I can update it manually by changing false to true. Then saving the app and waiting for a rear ender to confirm that my changes have indeed happened. Because the previous heading of light mode is on, has now become the heading that reads dark mode is on. But as soon as I click the button, the console lock changes. However, the heading in the web app doesn't reflect this change. Why is this the case? To understand this, you need to go deeper into data flow and react and observe how it moves between components. Fortunately, you'll be learning that soon. Great job, you should now be able to demonstrate how to toggle the value of a Boolean state variable using user triggered events. And how to handle multiple events on a single JSX element
