Javascript width based if else condition | React Js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>

<body>
    <div id="app" class="container">
      <h3>Javascript width based if else condition</h3>
      <div id="dynamicElement" style="width: 100%; border: 1px solid #333333;">
        Font Awesome Icons
      </div>
      <p id="widthText">width: 100%</p>
      <button id="toggleButton">Toggle Width</button>
    </div>

var dynamicWidth = "100%";

toggleButton.addEventListener("click", function () {
          if (dynamicWidth === "100%") {
            dynamicWidth = "50%";
          } else {
            dynamicWidth = "100%";
          }

dynamicElement.style.width = dynamicWidth;
          widthText.innerText = "width: " + dynamicWidth;
        });
      });
    </script>