#root

$color_1: #ffffff;
$background-color_1: #000000;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: $background-color_1;
  color: $color_1;
}
input {
  padding: 10px;
}

import { useState } from "https://cdn.skypack.dev/react";
import { render } from "https://cdn.skypack.dev/react-dom";

const App = () => {
  const [password, setPassword] = useState(true);

  const handleHideShow = () => {
    setPassword(!password);
  };

  return (
    <div>
      <form action="">
        <input type={password ? "password" : "text"} />
        <input
          type="button"
          value={password ? "Show" : "Hide"}
          onClick={handleHideShow}
        />
      </form>
    </div>
  );
};

render(<App />, document.getElementById("root"));