ok

src/components/ItemType.js

@@ -5,16 +5,21 @@ export default function ItemType({
   onClick,
   onCreate,
   blank,
-  name: initialName = "",
+  name,
   imageUrl,
   selected,
   rectangular,
 }) {
   const inputRef = useRef(null);
-  const [name, setName] = useState(initialName);
+  const [namee, setName] = useState(name);
   const [selectedImage, setSelectedImage] = useState(null);
   const [previewUrl, setPreviewUrl] = useState(imageUrl);
 
+  // Effect to update local state when name prop changes
+  useEffect(() => {
+    setName(name);
+  }, [name]);
+
   useEffect(() => {
     if (blank && inputRef.current) {
       inputRef.current.focus();
@@ -26,12 +31,10 @@ export default function ItemType({
       const reader = new FileReader();
       reader.onloadend = () => {
         onClick(reader.result, selectedImage);
-        // setPreviewUrl(reader.result);
       };
       reader.readAsDataURL(selectedImage);
     } else {
       setPreviewUrl(imageUrl);
-      // onClick(getImageUrl(imageUrl));
     }
   }, [selectedImage, imageUrl]);
 
@@ -51,14 +54,14 @@ export default function ItemType({
       return;
     }
 
-    onCreate(name, selectedImage);
+    onCreate(namee, selectedImage);
   };
 
   return (
     <div
       className={
         styles[
-          name
+          namee
             ? "item-type"
             : rectangular
             ? "item-type-rectangular"
@@ -78,10 +81,10 @@ export default function ItemType({
       >
         <img
           src={previewUrl}
-          alt={name}
+          alt={namee}
           className={styles["item-type-image"]}
         />
-        {blank && (
+        {blank && rectangular && (
           <div className={styles["item-type-image-container"]}>
             <input
               type="file"
@@ -97,7 +100,7 @@ export default function ItemType({
         <input
           ref={inputRef}
           className={`${styles["item-type-name"]} ${styles.noborder}`}
-          value={name}
+          value={namee}
           onChange={handleNameChange}
           disabled={true}
           style={{
@@ -106,11 +109,6 @@ export default function ItemType({
           }}
         />
       )}
-      {/* {blank && (
-        <button className={styles["item-type-create"]} onClick={handleCreate}>
-          create
-        </button>
-      )} */}
     </div>
   );
 }