Solutions For Using The UseState Hook To Update Boolean State In React

Using the useState hook to update boolean state in React

Knowing how to use the useState hook to update the boolean state will be very useful if you want to interact with UI based on condition. So how to do it? – Let’s follow this article. I will give you some solutions for using the useState hook to update boolean state in React.

Using the useState hook to update boolean state in React

Example 1:

The logic here is I will create an useState hook to store the boolean value, and with the condition, I can call the set useState value every time condition is matched.

Copy the code below into your App.jsx file to review:

Example:

import { useState } from "react";
import "./App.css";

function App() {
  const [boolean, setBoolean] = useState(true);
  const handleClickBtn = (e) => {
    setBoolean(!boolean);
  };
  return (
    <div className="App">
      <h1>Hello From Learn Share IT</h1>
      <button
        onClick={handleClickBtn}
        style={{
          padding: "10px",
          backgroundColor: "greenyellow",
          border: "none",
        }}
      >
        Click Here To Change the Boolean state value
      </button>
      <h1>Current boolean state value: {boolean ? "True" : "False"}</h1>
    </div>
  );
}

export default App;

Output:

As you see, I create a boolean useState and initialize the value to true. I also create a button that will execute the handleClickBtn function every time that button is clicked. In handleClickBtn, I use not logical operators to set the Boolean value to the opposite it means if the boolean state value is true will be set to false, and if it is false will be set to true. And in the H1 element, I create a ternary operator expression to check and display a value based on the boolean state value. If the condition is true, then the code behind the question mark will be executed if false code behind the colon will be executed.

Example 2:

You can also apply to solve more problems.

Example:

import { useState } from "react";
import "./App.css";

function App() {
  const [boolean, setBoolean] = useState(true);
  const [person, setPerson] = useState({
    name: "Togban",
    age: 30,
    address: "Japan",
  });
  const handleClickBtn = (e) => {
    setBoolean(!boolean);
    console.log(boolean);
  };
  const displayPerson = (
    <>
      <h1>Name: {person.name}</h1>
      <h1>Age: {person.age}</h1>
      <h1>Address: {person.address}</h1>
    </>
  );
  return (
    <div className="App">
      <h1>Hello From Learn Share IT</h1>
      <button
        onClick={handleClickBtn}
        style={{
          padding: "10px",
          backgroundColor: "greenyellow",
          border: "none",
        }}
      >
        Toggle show person
      </button>
      <h1> {boolean ? displayPerson : ""}</h1>
    </div>
  );
}

export default App;

Output:

Summary

In this tutorial, I showed you some solutions and examples for using the useState hook to update boolean state in React. I hope it is useful to you. Let’s try these methods to get your desired results. Good luck for you!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *