Ambrose Liew

Fruit selected:
Dialog.tsx

import React from "react";
export default function Dialog() {
  const ref = React.useRef<any>(null);
  // type is any because TypeScript does not support HTMLDialogElement's methods
  const [fruit, setFruit] = React.useState("");
  const handleCancel = () => {
    ref.current?.close();
  };
  const handleSubmit = (e: any) => {
    // type is any because it is a pain in the ass to set up form name types properly
    // read https://claritydev.net/blog/typescript-typing-form-events-in-react if interested
    e.preventDefault();
    setFruit(e.target.fruit.value);
    ref.current?.close();
  };
  return (
    <div>
      <dialog ref={ref}>
        <form onSubmit={handleSubmit}>
          <p>
            <label>
              Favorite fruit:
              <select name="fruit">
                <option value="default">Choose…</option>
                <option value="Apple">Apple</option>
                <option value="Banana">Banana</option>
                <option value={"Orange"}>Orange</option>
              </select>
            </label>
          </p>
          <div>
            <button type="button" onClick={handleCancel}>
              Cancel
            </button>
            <button type="submit">Confirm</button>
          </div>
        </form>
      </dialog>
      <button onClick={() => ref.current?.showModal()}>Show the dialog</button>
      <p>Fruit selected: {fruit}</p>
    </div>
  );
}