blog API implementation

src/components/News/Blogs.js

@@ -1,10 +1,18 @@
-import React from 'react';
-import BlogData from '../../Services/BlogData';
+import React, { useEffect, useState } from 'react';
 import blogOne from '../../assets/images/blog/1.jpg';
+import BlogData from '../../Services/BlogData';
 
 function Blogs() {
+    const [blogs, setBlogs] = useState([])
 
-    const BlogDataResult = BlogData();
+    useEffect(()=>{
+        BlogData().then(res => {
+            // console.log('TESTING',res)
+            setBlogs(res.data)
+        }).catch(err => {
+            console.log('Error loading blogdata', err)
+        })
+    },[])
 
     return (
         <>
@@ -12,11 +20,11 @@ function Blogs() {
 
 
                 {
-                    BlogDataResult.map(i => {
+                    blogs?.blogdata?.map(i => {
                         var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                         var postDt  = new Date(i.post_date).toLocaleDateString("en-US", options);
-                        var blgImg = i.meta_value != null ? "https://blog.wrenchboard.com/wp-content/uploads/" + i.meta_value : blogOne;
-                        return (<div className="col-lg-4 col-md-6">
+                        var blgImg = i.meta_value != null ? `${blogs.image_url}/${i.meta_value}` : blogOne;
+                        return (<div key={i.id} className="col-lg-4 col-md-6">
                             <div
                                 className="appie-blog-item mt-30 wow animated fadeInUp"
                                 data-wow-duration="3000ms"