Untitled

import React, { useState, useEffect } from 'react';
import { useParams,Link } from 'react-router-dom';
import axios from 'axios';
import './BlogDetailsPage.css'

 
const BlogDetailsPage = () => {
  const { title } = useParams();
  const [blogDetails, setBlogDetails] = useState({blogDescription:'',createdDate:'',lastUpdatedDate:''});
 
 
  useEffect(() => {
    fetchBlogDetails(title);
  }, [title]);
 
  const fetchBlogDetails = async (blogTitle) => {
    try {
const response = await axios.get(`http://localhost:5221/api/Blog/GetDetails?title=${encodeURIComponent(blogTitle)}`);
      const data = response.data;
      console.log(response);
      console.log(response.data);
      console.log(blogTitle);
      console.log('deails',data);
      
      setBlogDetails(data);
      console.log(blogDetails);
    } catch (error) {
      console.error('Error fetching blog details:', error);
      console.error('Response:', error.response);
    }
  };
 
  return (
   <div className="full2">
      <div className="blogdetailscontainer">
      <Link to="/" className="backbutton">Back</Link>
      <p className="blogtitle"><b>Title:</b><br /><br /> {title}</p>
      <p className="blogdescription"><b>Description</b>: <br /> <br /> {blogDetails.blogDescription}</p>
      <p className="createdDate"><b>Created Date</b>: <br /> <br /> {blogDetails.createdDate}</p>
      <p className="lastUpdatedDate"><b>Last Updated Date</b>: <br /> <br /> {blogDetails.lastUpdatedDate}</p>
    </div>
   </div>
  );
};
 
export default BlogDetailsPage;