Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading ‘sizes’)

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading ‘sizes’)

Source
srcappadmin-viewadd-productpage.js (164:34) @ sizes

162 | Available sizes
163 | <TileComponent

164 | selected={formData.sizes}
| ^
165 | onClick={handleTileClick}
166 | data={AvailableSizes}
167 | />

“use client”;

import InputComponent from “@/components/FormElements/InputComponent”;
import SelectComponent from “@/components/FormElements/SelectComponent”;
import TileComponent from “@/components/FormElements/TileComponent”;
import ComponentLevelLoader from “@/components/Loader/componentlevel”;
import Notification from “@/components/Notification”;
import { GlobalContext } from “@/context”;
import { addNewProduct, updateAProduct } from “@/app/services/product”;
import {
AvailableSizes,
adminAddProductformControls,
firebaseConfig,
firebaseStorageURL,
} from “@/utils”;
import { initializeApp } from “firebase/app”;
import {
getDownloadURL,
getStorage,
ref,
uploadBytesResumable,
} from “firebase/storage”;
import { useRouter } from “next/navigation”;
import { useContext, useEffect, useState } from “react”;
import { toast } from “react-toastify”;
import { resolve } from “styled-jsx/css”;

const app = initializeApp(firebaseConfig);
const storage = getStorage(app, firebaseStorageURL);

const createUniqueFileName = (getFile) => {
const timeStamp = Date.now();
const randomStringValue = Math.random().toString(36).substring(2, 12);

return ${getFile.name}-${timeStamp}-${randomStringValue};
};

async function helperForUPloadingImageToFirebase(file) {
const getFileName = createUniqueFileName(file);
const storageReference = ref(storage, ecommerce/${getFileName});
const uploadImage = uploadBytesResumable(storageReference, file);

return new Promise((resolve, reject) => {
uploadImage.on(
“state_changed”,
(snapshot) => {},
(error) => {
console.log(error);
reject(error);
},
() => {
getDownloadURL(uploadImage.snapshot.ref)
.then((downloadUrl) => resolve(downloadUrl))
.catch((error) => reject(error));
}
);
});
}

const initialFormData = {
name: “”,
price: 0,
description: “”,
category: “men”,
sizes: [],
deliveryInfo: “”,
onSale: “no”,
imageUrl: “”,
priceDrop: 0,
};

export default function AdminAddNewProduct() {
const [formData, setFormData] = useState(initialFormData);

const {
componentLevelLoader,
setComponentLevelLoader,
currentUpdatedProduct,
setCurrentUpdatedProduct,
} = useContext(GlobalContext);

console.log(currentUpdatedProduct);

const router = useRouter();

useEffect(() => {
if (currentUpdatedProduct !== null) setFormData(currentUpdatedProduct);
}, [currentUpdatedProduct]);

async function handleImage(event) {
const extractImageUrl = await helperForUPloadingImageToFirebase(
event.target.files[0]
);

}

function handleTileClick(getCurrentItem) {
let cpySizes = […formData.sizes];
const index = cpySizes.findIndex((item) => item.id === getCurrentItem.id);

}

async function handleAddProduct() {
setComponentLevelLoader({ loading: true, id: “” });
const res =
currentUpdatedProduct !== null
? await updateAProduct(formData)
: await addNewProduct(formData);

}

console.log(formData);

return (

accept=”image/*”
max=”1000000″
type=”file”
onChange={handleImage}
/>
<div className=”flex gap-2 flex-col”>
<label>Available sizes</label>
<TileComponent
selected={formData.sizes}
onClick={handleTileClick}
data={AvailableSizes}
/>
</div>
{adminAddProductformControls.map((controlItem) =>
controlItem.componentType === “input” ? (
<InputComponent
type={controlItem.type}
placeholder={controlItem.placeholder}
label={controlItem.label}
value={formData[controlItem.id]}
onChange={(event) => {
setFormData({
…formData,
[controlItem.id]: event.target.value,
});
}}
/>
) : controlItem.componentType === “select” ? (
<SelectComponent
label={controlItem.label}
options={controlItem.options}
value={formData[controlItem.id]}
onChange={(event) => {
setFormData({
…formData,
[controlItem.id]: event.target.value,
});
}}
/>
) : null
)}
<button
onClick={handleAddProduct}
className=”inline-flex w-full items-center justify-center bg-black px-6 py-4 text-lg text-white font-medium uppercase tracking-wide”
>
{componentLevelLoader && componentLevelLoader.loading ? (
<ComponentLevelLoader
text={
currentUpdatedProduct !== null
? “Updating Product”
: “Adding Product”
}
color={“#ffffff”}
loading={componentLevelLoader && componentLevelLoader.loading}
/>
) : currentUpdatedProduct !== null ? (
“Update Product”
) : (
“Add Product”
)}
</button>
</div>
</div>
<Notification />
</div>

);
}