import * as React from "react";

export const PasswordForm = () => {
  const [password, setPassword] = React.useState("");
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <input
        type={visible ? "text" : "password"}
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button
        type="button"
        children={"view"}
        onClick={() => setVisible(!visible)}
      />
    </>
  );
};
import * as React from "react";

type Props = {
  password: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
};

export const PasswordForm = ({ password, onChange }: Props) => {
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <input
        type={visible ? "text" : "password"}
        value={password}
        onChange={onChange}
      />
      <button
        type="button"
        children={"view"}
        onClick={() => setVisible(!visible)}
      />
    </>
  );
};