The following application includes a button that ensures new content is displayed. Technically, the React component is re-rendered after the click, thereby showing the previously hidden area.

//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>    
    );
}

With this principle, we can also change the styling of a component, as demonstrated in the following example:

//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>
  );
}