Fehler: Elementtyp ist ungültig: Erwartet eine Zeichenfolge (für integrierte
-Komponenten) oder eine Klasse /Funktion (für zusammengesetzte Komponenten), wurde jedoch:
Undefiniertes erhalten. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren.
Code: Select all
src/
├── Components/
│ ├── Modals/
│ │ ├── MainModal.jsx
│ │ └── CategoryModal.jsx
└── Screens/
└── Dashboard/
└── Admin/
└── Categories.jsx
< /code>
categoryModal.jsx
import React from "react";
import MainModal from "./MainModal";
function CategoryModal({ modalOpen, setModalOpen }) {
return (
Create
);
}
export default CategoryModal;
< /code>
categories.jsx
import React, { useState } from "react";
import SideBar from "../SideBar";
import { CategoriesData } from "../../../Data/CateporiesData";
import { HiPlus } from "react-icons/hi";
import Table2 from "../../../Components/Table2";
// Make sure this path is correct - verify the actual location of your CategoryModal component
import CategoryModal from "../../../Components/Modals/CategoryModal";
function Categories() {
const [modalOpen, setModalOpen] = useState(false);
const openModal = () => {
setModalOpen(true);
};
return (
{/* Modal component */}
Categories
Create
);
}
export default Categories;
< /code>
Mainmodal.jsx
import { Dialog, Transition } from "@headlessui/react";
import React, { Fragment, useRef } from "react";
import { IoClose } from "react-icons/io5";
function MainModal({ modalOpen, setModalOpen, children }) {
const cancelButtonRef = useRef();
return (
setModalOpen(false)}
>
{/* This element is to trick the browser into centering the modal contents. */}
​
{children}
setModalOpen(false)}
type="button"
className="inline-flex transition justify-center px-4 py-2 text-base font-medium text-white bg-subMain rounded-full hover:bg-white hover:text-red-500"
>
);
}
export default MainModal;