Reactで<dialog>いじってみたけどつらい件2

www.pandanoir.info

5年経ったので書き直しをば

interface Props {
  isOpen: boolean;
  onClose: () => void;
}

const Dialog = ({ isOpen, onClose }: Props) => {
  const dialogRef = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    if (isOpen) {
      dialogRef.current?.showModal();
    } else {
      dialogRef.current?.close();
    }
  }, [isOpen]);

  return (
    <dialog ref={dialogRef}>
      <form method="dialog">
        name: <input type="text" />
        <br />
        age: <input type="number" />
        <br />
        <button onClick={onClose}>Cancel</button>
        <button>Confirm</button>
      </form>
    </dialog>
  );
};