update src/views/Blog/index.js

src/views/Blog/index.js

@@ -25,6 +25,7 @@ export const Blog = ({
   activeBlog,
 }) => {
   let { id } = useParams();
+  console.log(id);
 
   // let id = location.getId();
   useEffect(() => {
@@ -44,40 +45,6 @@ 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 />
@@ -173,7 +140,37 @@ export const Blog = ({
         </div>
       ) : (
         <div className="w-full relative" style={{ direction: "ltr" }}>
-          <suggestionSlider />
+          {blogs.length > 0 && (
+            <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>