Explore React

Managing boolean state

DEMO

Drag me down!

When updating a boolean, we can use the setter function to set aTrue or False value. Alternatively, we can use the ! (not) operator to toggle between them.

ToggleLamp.jsx

const ToggleLamp = () => {
  const [isLampOn, setIsLampOn] = React.useState(false);

  const handleDrag = () => {
    // toggle light
    setIsLampOn(!isLampOn);
  };

  return (
    <LampDemoWrapper>
      <Lamp isLampOn={isLampOn}/>
      <Chain />
      <Switch src={switchImg} onDrag={handleDrag} />
    </LampDemoWrapper>
  );
};

Note: Code snippets do not include styling details unless they are the focus of the exercise.