How To Toggle A Boolean State In React

If you want to find the answer to how to toggle a Boolean state in React, this whole article is what you are looking for to solve it. Read on it now.

What is the Boolean definition?

Boolean terms are frequently used to express computer logic because computers operate in binary. For instance, Boolean logic can describe computer circuit states that are counted (1 or true) or unloaded (0 or false). These are the fundamental binary concepts that are the foundation of computer processing.

Create a Boolean state in React

First, we need to create a boolean state using the useState() hook, then we create a button click and listen for its event using the onClick event handler. Every time we press the button, the state boolean will be toggled by this function. The example below will show you how to do it in React.

Code:

import { useState } from "react";

export default function App(){
  const [isDarkMode, setIsDarkMode] = useState(true);
  const handleOnClick = () => { /*Where you toggle isDarkMode state*/};
  return (
      <button onClick={handleOnClick}>Dark Mode Toggle</button>
  );
}

In the above example, the part we left empty in the handleOnClick function will toggle the component’s state value. In the next section, we will show you some ways to do this task.

Some ways to toggle a Boolean state in React

Use the “!” operator

You can use “!” to toggle the boolean state from true to false and vice versa. Below is an example of how to toggle using the above method. Stay tuned for more details.

Code:

import { useState } from "react";

export default function App(){
  const [isDarkMode, setIsDarkMode] = useState(true);
  const handleOnClick = () => {
    setIsDarkMode(!isDarkMode);
    console.log(isDarkMode);
  };
  return (
      <button onClick={handleOnClick}>Dark Mode Toggle</button>
  );
}

When you click on the Darkmode Toggle button, the console.log screen will show the value of the state that has been changed. For example, the init value of the state is false at first, and after pressing the button, it will change to true.

Use function params

However, if you have worked with React for a long time, you will know that this method will cause many errors that are not easy to identify. And if you want to change the state based on the previous state value, the example below will be one way.

Code:

import { useState } from "react";

export default function App(){
  const [isDarkMode, setIsDarkMode] = useState(true);
  const handleOnClick = () => {
    setIsDarkMode((isDarkMode) => !isDarkMode);
    console.log(isDarkMode);
  };
  return (
      <button onClick={handleOnClick}>Dark Mode Toggle</button>
  );
}

In this way, the program changes the state based on the previous state value, namely isdarkmode. For example, initially true, it will change from !true=false.

Summary

In this article, I have provided you two solutions for how to toggle a Boolean state in React. Try applying it to your program to get the result. If you have any questions or problems, please comment below. Thank you for reading!

Maybe you are interested:

• Update nested properties in a State object in React
• Use a condition inside map() in React
• Set a Default route with redirect using React Router

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs