Snippet

Toggling Boolean State Values in React Components

Boolean data types are essential in React for managing binary user interface states, such as visibility or active flags. By passing an updater function to the state setter, the component reliably flips the current boolean value to its opposite.

snippet.js

javascript

import { useState } from 'react';
 
function NotificationToggle() {
  const [isVisible, setIsVisible] = useState(true);
 
  const handleToggle = () => {
    setIsVisible((prev) => !prev);
  };
 
  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      {isVisible && <p>New message received!</p>}
    </div>
  );
}

react

Breakdown

const [isVisible, setIsVisible] = useState(true);

Initializes a state variable holding a primitive boolean value of true.

setIsVisible((prev) => !prev);

Uses the logical NOT operator (!) inside a state updater callback to invert the boolean.

{isVisible && <p>New message received!</p>}

Evaluates the boolean value to conditionally display the message element.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Toggling Boolean State Values in React Components

Related