React - wie kann man ein Element anzeigen oder ausblenden?

In diesem Artikel wird gezeigt, wie man Elemente in React anzeigen oder ausblenden kann.

Die Ein-Tasten-Lösung

Im folgenden Beispiel wird eine einfache Lösung mit einer Schaltfläche gezeigt, die das Element <div>Mein Element</div> anzeigt oder ausblendet. 

Man verwendet React.useState-Hook, um den Zustand des Elements (sichtbar oder versteckt) zu speichern.
Standardmäßig ist das Element ausgeblendet. Um seine Sichtbarkeit zu ändern, muss man das negierte visible-Argument an den onClick-Ereignishandler übergeben.

Praktisches Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Ausblenden' : 'Anzeigen'}
      </button>
      {visible && <div>Mein Element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Die Zwei-Tasten-Lösung

Im folgenden Beispiel wird eine Lösung mit zwei separaten Schaltflächenkomponenten zum Anzeigen und Ausblenden des Elements <div>Mein Element</div> gezeigt.

Man verwendet React.useState-Hook, um den Zustand des Elements (sichtbar oder versteckt) zu speichern.
Standardmäßig ist das Element ausgeblendet. Um seine Sichtbarkeit zu ändern, erstellt man zwei Schaltflächen, die, wenn sie angeklickt werden, die Funktion setVisible aufrufen, und das Argument visible auf true (um das Element sichtbar zu machen) oder false (um es auszublenden).

Praktisches Beispiel:

// ONLINE-RUNNER:browser;

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(true)}>Anzeigen</button>
      <button onClick={() => setVisible(false)}>Ausblenden</button>
      {visible && <div>Mein Element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );