Untitled

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

 
const BlogDetailsPage = () => {
  const { title } = useParams();
  const [blogDetails, setBlogDetails] = useState(null);
 
 
  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>
      <h2>Title: {title}</h2>
      <p>Description: {blogDetails}</p>
    </div>
  );
};
 
export default BlogDetailsPage;