Why this modal reactivity is not working? 60 lines of code

import { createSignal } from "solid-js";
import Modal from "./Modal";

function App() {
  const [isModalOpen, setIsModalOpen] = createSignal(false);

  const openModal = () => {
    console.log("Open modal");
    setIsModalOpen(true);
    console.log("isModalOpen after open:", isModalOpen());
  };

  const closeModal = () => {
    console.log("Close modal");
    setIsModalOpen(false);
    console.log("isModalOpen after close:", isModalOpen());
  };

  return (
    <div class="w-screen h-screen flex items-center justify-center">
      <button
        class="px-4 py-2 bg-blue-500 text-white rounded"
        onClick={openModal}
      >
        Open Modal
      </button>
      <Modal show={() => isModalOpen()} onClose={closeModal} />
    </div>
  );
}

export default App;


import { createEffect } from "solid-js";

type ModalProps = {
  show: () => boolean;
  onClose: () => void;
};

export default function Modal({ show, onClose }: ModalProps) {
  const handleClickOutside = (event: MouseEvent) => {
    if ((event.target as HTMLElement).id === "modal-background") {
      onClose();
    }
  };

  createEffect(() => {
    console.log("Modal show status (inside effect):", show);
  });

  return (
    <>
      {show() && (
        <div
          id="modal-background"
          class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
          onClick={handleClickOutside}
        >
          <div class="bg-white rounded-lg shadow-lg p-8">
            <div class="text-center">
              Modal Content
              <button onClick={onClose}>Close</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

import { createSignal } from "solid-js";
import Modal from "./Modal";

function App() {
  const [isModalOpen, setIsModalOpen] = createSignal(false);

  const openModal = () => {
    console.log("Open modal");
    setIsModalOpen(true);
    console.log("isModalOpen after open:", isModalOpen());
  };

  const closeModal = () => {
    console.log("Close modal");
    setIsModalOpen(false);
    console.log("isModalOpen after close:", isModalOpen());
  };

  return (
    <div class="w-screen h-screen flex items-center justify-center">
      <button
        class="px-4 py-2 bg-blue-500 text-white rounded"
        onClick={openModal}
      >
        Open Modal
      </button>
      <Modal show={() => isModalOpen()} onClose={closeModal} />
    </div>
  );
}

export default App;


import { createEffect } from "solid-js";

type ModalProps = {
  show: () => boolean;
  onClose: () => void;
};

export default function Modal({ show, onClose }: ModalProps) {
  const handleClickOutside = (event: MouseEvent) => {
    if ((event.target as HTMLElement).id === "modal-background") {
      onClose();
    }
  };

  createEffect(() => {
    console.log("Modal show status (inside effect):", show);
  });

  return (
    <>
      {show() && (
        <div
          id="modal-background"
          class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
          onClick={handleClickOutside}
        >
          <div class="bg-white rounded-lg shadow-lg p-8">
            <div class="text-center">
              Modal Content
              <button onClick={onClose}>Close</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}