Untitled

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import './searchh.css';
 
const BlogDetailsPage = () => {
  const { title } = useParams();
  const [blogDetails, setBlogDetails] = useState({ title: '', description: '' });
 
  useEffect(() => {
    fetchBlogDetails(title);
    console.log("useeffect working");
  }, [title]);
 
  const fetchBlogDetails = async (blogTitle) => {
    try {
  const response = await axios.get(`http://localhost:5221/api/Blog/GetDescription?title=${encodeURIComponent(blogTitle)}`);
      const data = response.data;
      setBlogDetails(data);
      console.log("api response",data);
    } catch (error) {
      console.error('Error fetching blog details:', error);
      console.error('Response:', error.response); // Log the response for more details
    }
  };
 
  return (
    <div>
      <h2>Title : {blogDetails.title}</h2>
      <p>Description : {blogDetails.description}</p>
    </div>
  );
};
 
export default BlogDetailsPage;