UI anzeigen, wenn eine Variable wahr ist – React JS

In diesem Artikel besprechen wir, wie Sie jede Benutzeroberfläche ein- oder ausblenden können, wenn der Wert einer Variablen in React JS wahr ist. Im Anschluss an dieses Tutorial erfahren Sie auch, wie Sie die if-Bedingung in React JS verwenden. Sie müssen nur drei Dinge tun:

1. Importieren useState von „reagieren“
2. Erstellen Sie eine Variable
3. UI nur anzeigen, wenn diese Variable wahr ist

Hier ist der Code:

import { useState } from "react"

function App() {

  const [showButton, setShowButton] = useState(false)

  return (
    <button>Always show</button>

    { showButton && (
        <button>
          Show only when required
        </button>
    ) }
  )
}

export default App

Standardmäßig wird die zweite Schaltfläche nicht angezeigt, da der Standardwert „false“ ist. Versuchen Sie, den Wert der Variablen von „false“ in „true“ zu ändern. Die Benutzeroberfläche wird angezeigt.

Schauen Sie sich unsere mehr an Tutorials auf React JS.