React Image full screen on click

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module">
      const { useState } = React;

const App = () => {
        const imageUrl =
          "https://www.sarkarinaukriexams.com/images/import/sne1586776004.png"; // Placeholder image URL

const [showFullScreen, setShowFullScreen] = useState(false);

const handleImageClick = () => {
          setShowFullScreen(true);
        };

const handleCloseFullScreen = () => {
          setShowFullScreen(false);
        };

return (
          <div className="container">
            <h2>React js Image fullscreen onclick</h2>
            <img
              className="image"
              src={imageUrl}
              alt="Full Screen"
              onClick={handleImageClick}
            />

{showFullScreen && (
              <div
                className="fullscreen-overlay active"
                onClick={handleCloseFullScreen}
              >
                <div className="fullscreen-image">
                  <img
                    className="centered-image"
                    src={imageUrl}
                    alt="Full Screen"
                  />
                </div>
              </div>
            )}
          </div>
        );
      };

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      body {
        margin: 0;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        font-family: Arial, sans-serif;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: relative;
      }
      /* Styles for the image */
      .image {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
      }

/* Styles for the fullscreen overlay */
      .fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        cursor: pointer;
      }

.fullscreen-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    </style>
  </body>
</html>

 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module">
      const { useState } = React;
​
      const App = () => {
        const imageUrl =
          "https://www.sarkarinaukriexams.com/images/import/sne1586776004.png"; // Placeholder image URL
​
        const [showFullScreen, setShowFullScreen] = useState(false);
​
        const handleImageClick = () => {
          setShowFullScreen(true);
        };
​
        const handleCloseFullScreen = () => {
          setShowFullScreen(false);
        };
​
        return (
          <div className="container">
            <h2>React js Image fullscreen onclick</h2>
            <img
              className="image"
              src={imageUrl}
              alt="Full Screen"
              onClick={handleImageClick}
            />
​
            {showFullScreen && (
              <div
                className="fullscreen-overlay active"
                onClick={handleCloseFullScreen}
              >
                <div className="fullscreen-image">
                  <img
                    className="centered-image"
                    src={imageUrl}
                    alt="Full Screen"
                  />
                </div>
              </div>
            )}
          </div>
        );
      };
​
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      body {
        margin: 0;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        font-family: Arial, sans-serif;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: relative;
      }
      /* Styles for the image */
      .image {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
      }
​
      /* Styles for the fullscreen overlay */
      .fullscreen-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        cursor: pointer;
      }
​
      .fullscreen-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    </style>
  </body>
</html>
​