score:0

simply wrap the dialogs in a wrapper component and have both point to the same reference for their open states.

take a look at this sandbox for a working example: https://codesandbox.io/s/delicate-star-cox1g

function dialogs() {
  const [open, setopen] = usestate();

  return (
    <>
      <button onclick={() => setopen("first")}>open first dialog</button>

      <dialog open={open && open === "first"}>
        <dialogtitle>first dialog</dialogtitle>
        <dialogactions>
          <button onclick={() => setopen("second")}>close first dialog</button>
        </dialogactions>
      </dialog>

      <dialog open={open && open === "second"}>
        <dialogtitle>second dialog</dialogtitle>
        <dialogactions>
          <button onclick={() => setopen(null)}>close second dialog</button>
        </dialogactions>
      </dialog>
    </>
  );
}

Related Query

More Query from same tag