React - Dynamische Anzeige von Inhalten

Die folgende Anwendung beinhalten einen Button, welche dafür sorgt, dass neuer Inhalt angezeigt wird. Technisch betrachtet, wird die React Komponente nach dem Klick neu gerendert und damit der zuvor ausgeblendete Bereich angezeigt.

//App.jsx
import React, { useState } from 'react';

export default function App() {

  const [showDialog, setShowDialog] = useState(false);

    return (
      <div>
        {showDialog && (
          <div data-testid="alert" id="alert">
          <h2>Are you sure?</h2>
          <p>These changes can't be reverted!</p>
          <button onClick={() => setShowDialog(false)}>Proceed</button>
        </div>
        )}
      
        <button onClick={() => setShowDialog(true)}>Delete</button>
      </div>    
    );
}

Mit diesem Prinzip können wir auch das Styling einer Komponente ändern, wie das folgende Beispiel zeigt:

//App.jsx
import { useState } from 'react';

export default function App() {
  const [activeButton, setActiveButton] = useState(false);

  return (
    <div>
      <p className={activeButton ? '' : 'active'}>Style me!</p>
      <button onClick={() => setActiveButton(!activeButton)}>Toggle style</button>
    </div>
  );
}