Snippet

Umschalten von booleschen Zustandswerten in React-Komponenten

Boolesche Datentypen sind in React essenziell für binäre UI-Zustände wie Sichtbarkeiten oder Aktivierungsflags. Durch Übergabe einer Aktualisierungsfunktion an den State-Setter wird der aktuelle Wahrheitswert zuverlässig in sein Gegenteil umgekehrt.

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

Erklärung

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

Initialisiert eine Zustandsvariable mit dem primitiven booleschen Wert true.

setIsVisible((prev) => !prev);

Verwendet den logischen NOT-Operator (!) in einem Updater-Callback zur Umkehrung des Booleans.

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

Wertet den booleschen Zustand aus, um das Nachrichtenelement bedingt anzuzeigen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Umschalten von booleschen Zustandswerten in React-Komponenten

Verwandt