React page not loading without error message

Question

After running it via npm, it doesn't work when I click on the page for the first time or type its extension, but when I click on other pages before clicking, page works. I deleted the string texts and imports. Footer navbar does not load either. The page is blank, only the background color appears.

Screenshots

const Profil = () => {
    const dataTableFuncMap = {
        products2: setProducts2,};
    
    const [date7, setDate7] = useState(null);
    const [totalSize, setTotalSize] = useState(0);
    const fileUploadRef = useRef(null);
    const [products, setProducts] = useState(null);
    const [products2, setProducts2] = useState(null);
    const [productDialog, setProductDialog] = useState(false);
    const [deleteProductDialog, setDeleteProductDialog] = useState(false);
    const [deleteProductsDialog, setDeleteProductsDialog] = useState(false);
    const [product, setProduct] = useState(emptyProduct);
    const [selectedProducts, setSelectedProducts] = useState(null);
    const [submitted, setSubmitted] = useState(false);
    const [globalFilter, setGlobalFilter] = useState(null);
    const toast = useRef(null);
    const dt = useRef(null);
    const [pzkapanıssaat, setPzkapanısssaat] = useState(null);
    const [ctkapanıssaat, setCtkapanısssaat] = useState(null);
    const [pzacılıssaat, setPzacılıssaat] = useState(null);
    const [ctacılıssaat, setCtacılıssaat] = useState(null);
    const [dkapanıssaat, setDkapanısssaat] = useState(null);
    const [dacılıssaat, setDacılıssaat] = useState(null);
    const [oacılıssaat, setOacılıssaat] = useState(null);
    const [okapanıssaat, setOkapanısssaat] = useState(null);
    const [otarih, setOtarih] = useState(null);
    const [editingRows, setEditingRows] = useState({});
    const productService = new ProductService();

    useEffect(() => {
        productService.getMagazalar().then((data) => setProducts(data));
        fetchProductData("products2");
    }, []);
    // eslint-disable-line react-hooks/exhaustive-deps

    const fetchProductData = (productStateKey) => {
        productService.getProductsSmall().then((data) => dataTableFuncMap[`${productStateKey}`](data));
    };
    const onRowEditComplete1 = (e) => {
        let _products2 = [...products2];
        let { newData, index } = e;
        _products2[index] = newData;
        setProducts2(_products2);
    };
        const textEditor = (options) => {
        return  options.editorCallback(e.target.value)} />;};
        const statusEditor = (options) => {
        return (
             options.editorCallback(e.value)}
                placeholder="Select a Status"
                itemTemplate={(option) => {
                    return {option.label};
                }}/>); };

    const statusBodyTemplate = (rowData) => {
        return getStatusLabel(rowData.inventoryStatus);
    };

    const onTemplateSelect = (e) => {
        let _totalSize = totalSize;
        e.files.forEach((file) => {
            _totalSize += file.size;
        });

        setTotalSize(_totalSize);
    };

    const onTemplateUpload = (e) => {
        let _totalSize = 0;
        e.files.forEach((file) => {
            _totalSize += file.size || 0;
        });

        setTotalSize(_totalSize);
        toast.current.show({ severity: "info", summary: "Başarılı", detail: "Resim Yüklendi" });
    };

    const onTemplateRemove = (file, callback) => {
        setTotalSize(totalSize - file.size);
        callback();
    };

    const onTemplateClear = () => {
        setTotalSize(0);
    };

    const headerTemplate = (options) => {
        const { className, chooseButton, uploadButton, cancelButton } = options;
        const value = totalSize / 10000;
        const formatedValue = fileUploadRef && fileUploadRef.current ? fileUploadRef.current.formatSize(totalSize) : "0 B";

        return (
            
                {chooseButton}
                {uploadButton}
                {cancelButton}
                 `${formatedValue} / 1 MB`} style={{ width: "300px", height: "20px", marginLeft: "auto" }}>
            
        );
    };

    const itemTemplate = (file, props) => {
        return (
            
                
                    
                    
                        {file.name}
                        {new Date().toLocaleDateString()}
                    
                
                
                
        );
    };

    const emptyTemplate = () => {
        return (
            
                
                
                    Fotoğrafı Sürükle ve Bırak
                
            
        );
    };

    const openNew = () => {
        setProduct(emptyProduct);
        setSubmitted(false);
        setProductDialog(true);
    };

    const hideDialog = () => {
        setSubmitted(false);
        setProductDialog(false);
    };

    const hideDeleteProductDialog = () => {
        setDeleteProductDialog(false);
    };

    const hideDeleteProductsDialog = () => {
        setDeleteProductsDialog(false);
    };

    const saveProduct = () => {
        setSubmitted(true);

        if (product.name.trim()) {
            let _products = [...products];
            let _product = { ...product };
            if (product.id) {
                const index = findIndexById(product.id);

                _products[index] = _product;
                toast.current.show({ severity: "success", summary: "Başarılı", detail: "Mağaza Düzenlendi", life: 3000 });
            } else {
                _product.id = createId();
                _product.image = "product-placeholder.svg";
                _products.push(_product);
                toast.current.show({ severity: "success", summary: "Başarılı", detail: "Mağaza Oluşturuldu", life: 3000 });
            }

            setProducts(_products);
            setProductDialog(false);
            setProduct(emptyProduct);
        }
    };

    const editProduct = (product) => {
        setProduct({ ...product });
        setProductDialog(true);
    };

    const confirmDeleteProduct = (product) => {
        setProduct(product);
        setDeleteProductDialog(true);
    };
    const deleteProduct = () => {
        let _products = products.filter((val) => val.id !== product.id);
        setProducts(_products);
        setDeleteProductDialog(false);
        setProduct(emptyProduct);
        toast.current.show({ severity: "error", summary: "Başarılı", detail: "Mağaza Silindi", life: 3000 });
    };

    const findIndexById = (id) => {
        let index = -1;
        for (let i = 0; i < products.length; i++) {
            if (products[i].id === id) {
                index = i;
                break;
            }
        }

        return index;
    };

    const createId = () => {
        let id = "";
        let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for (let i = 0; i < 5; i++) {
            id += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return id;
    };

    const exportCSV = () => {
        dt.current.exportCSV();
    };

    const confirmDeleteSelected = () => {
        setDeleteProductsDialog(true);
    };

    const deleteSelectedProducts = () => {
        let _products = products.filter((val) => !selectedProducts.includes(val));
        setProducts(_products);
        setDeleteProductsDialog(false);
        setSelectedProducts(null);
        toast.current.show({ severity: "error", summary: "Başarılı", detail: "Mağaza Silindi", life: 3000 });
    };

    const onCategoryChange = (e) => {
        let _product = { ...product };
        _product["category"] = e.value;
        setProduct(_product);
    };

    const onInputChange = (e, name) => {
        const val = (e.target && e.target.value) || "";
        let _product = { ...product };
        _product[`${name}`] = val;

        setProduct(_product);
    };

    const leftToolbarTemplate = () => {
        return (
            
                
                    
            
        );
    };

    const rightToolbarTemplate = () => {
        return (

React page not loading without error message

0 Answers