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(() => {
    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
      }
    };

    fetchBlogDetails(title);
    console.log("useEffect working");
  }, [title]);

  // Conditional rendering to check if blog details are available
  if (!blogDetails.title && !blogDetails.description) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h2>Title: {blogDetails.title}</h2>
      <p>Description: {blogDetails.description}</p>
    </div>
  );
};

export default BlogDetailsPage;