Managing Boolean State with useState

Snippet

Managing Boolean State with useState

The useState hook allows you to add state to functional components. In this example, we use a boolean value to track whether a button is 'on' or 'off'.

snippet.js
javascript
import React, { useState } from 'react';
 
function ToggleButton() {
  const [isOn, setIsOn] = useState(false);
 
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

react

Breakdown

const [isOn, setIsOn] = useState(false);

Initializes a state variable 'isOn' with 'false' and a function 'setIsOn' to update it.

onClick={() => setIsOn(!isOn)}

An event handler that flips the current boolean value using the logical NOT operator (!).

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Managing Boolean State with useState

Related