روی این کار کردم که ساجستشن بلاگ ها درست کار کند اما نشد:((( |30

src/views/Blog/index.js

@@ -25,7 +25,6 @@ export const Blog = ({
   activeBlog,
 }) => {
   let { id } = useParams();
-  console.log(id);
 
   // let id = location.getId();
   useEffect(() => {
@@ -45,6 +44,40 @@ export const Blog = ({
     window.scrollTo(0, 0);
   }, [id]);
 
+  const suggestionSlider = React.useCallback(() => {
+    return (
+      <Carousel
+        show={4}
+        slide={2}
+        swiping={true}
+        useArrowKeys={true}
+        transition={0.5}
+        rightArrow={
+          <img
+            className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
+            src={arrow}
+            alt=""
+            // onClick={(e) => e.stopPropagation()}
+          />
+        }
+        leftArrow={
+          <img
+            className="absolute top-1/2 transform -translate-y-1/2  -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
+            src={arrow}
+            alt=""
+            // onClick={(e) => e.stopPropagation()}
+          />
+        }
+      >
+        {blogs
+          ?.filter((blog) => Number(blog?.id) !== Number(id))
+          .map((blog, index) => (
+            <Suggest blog={blog} key={index} />
+          ))}
+      </Carousel>
+    );
+  }, [blogs, id]);
+
   return (
     <div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-0 pb-24 ">
       <Hashtags />
@@ -140,37 +173,7 @@ export const Blog = ({
         </div>
       ) : (
         <div className="w-full relative" style={{ direction: "ltr" }}>
-          {blogs.length > 0 && (
+          <suggestionSlider />
-            <Carousel
-              show={4}
-              slide={2}
-              swiping={true}
-              useArrowKeys={true}
-              transition={0.5}
-              rightArrow={
-                <img
-                  className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
-                  src={arrow}
-                  alt=""
-                  // onClick={(e) => e.stopPropagation()}
-                />
-              }
-              leftArrow={
-                <img
-                  className="absolute top-1/2 transform -translate-y-1/2  -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
-                  src={arrow}
-                  alt=""
-                  // onClick={(e) => e.stopPropagation()}
-                />
-              }
-            >
-              {blogs
-                .filter((e) => e.id != blog.id)
-                .map((blog, index) => (
-                  <Suggest blog={blog} key={index} />
-                ))}
-            </Carousel>
-          )}
         </div>
       )}
     </div>