react modal unable to open

Question

i am trying to use the headless ui modal but i am trying to launch this modal.js from my home.js file.

so in my home.js file i have something like this

function Home() {
  const [isOpen, setIsOpen] = useState(false)

  const resultCKDArr = Object.values(responseData.ckd).map((item, i)=>
              <section class="text-gray-600 body-font overflow-hidden">
                <div class="container px-5 py-10 mx-auto">
                    <button onClick={() => setIsOpen(!isOpen)} class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Buy List</button>
                  </div>
                <Modal isOpen={isOpen} setIsOpen={setIsOpen} />
              </section>
              )
return (
     <>
        {resultCKDArr }
      </>
        
 );
 export default Home;

and this is my modal.js copy from headless ui modal as example to test

import React, { Fragment } from "react";
import { Dialog, Transition } from '@headlessui/react'

export default function Modal( props ) {
    const { isOpen, setIsOpen } = props
    return (
        <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={setIsOpen}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-900"
                  >
                    Payment successful
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
                      Your payment has been successfully submitted. We’ve sent
                      you an email with all of the details of your order.
                    </p>
                  </div>

                  <div className="mt-4">
                    <button
                      type="button"
                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                      onClick={setIsOpen}
                    >
                      Got it, thanks!
                    </button>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    )
};

maybe this is the error i saw in console

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

when i click on the button, i nothing happen, no modal pop out.

Answer 1

In my case there was an error with Dialog.Panel component. Try changing it to a div.