Scribd
Upload
103 views2 pages

Import React, (UseEffect, UseState

The document is a React component that fetches and displays a blog post based on its ID from the URL. It uses Axios to retrieve the post data and handles loading and error states. The component includes a Navbar and Footer, and displays the post's image, title, subtitle, description, content, and tags.

Uploaded by

Vinaya Rajput
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
103 views2 pages

Import React, (UseEffect, UseState

The document is a React component that fetches and displays a blog post based on its ID from the URL. It uses Axios to retrieve the post data and handles loading and error states. The component includes a Navbar and Footer, and displays the post's image, title, subtitle, description, content, and tags.

Uploaded by

Vinaya Rajput
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React, { useEffect, useState } from 'react';

import { useParams } from 'react-router-dom';


import './[Link]';
import Navbar from "../components/Navbar";
import Footer from '../components/Footer';
import { getPostById } from '../axios'; // Import the function to fetch post by ID

const Post = () => {


const { _id } = useParams(); // Get the post ID from the URL
[Link]("_id from useParams:", _id);
const [post, setPost] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchPost = async () => {
try {
const response = await getPostById(_id); // Use the Axios function to fetch
the post by ID
setPost([Link]); // Assuming the post data is in the response's data
field
setLoading(false);
} catch (error) {
[Link]('Error fetching post:', error);
setLoading(false);
}
};

fetchPost();
}, [_id]);

if (loading) return <p>Loading...</p>;


if (!post) return <p>Post not found.</p>;

return (
<div className='postSection'>
<Navbar />
<div className="post-container">
<div className="post-image-container">
{[Link] && <img src={[Link]} alt={[Link]} />}
</div>
<div className="post-content">
<h1 className="post-title">{[Link]}</h1>
<h2 className="post-subtitle">{[Link]}</h2>
<p><strong>Description:</strong> {[Link]}</p>
<p><strong>Content:</strong> {[Link]}</p>
<div className="post-tags">
<strong>Tags:</strong>
{[Link]((tag, index) => (
<span key={index} className="tag">
#{tag}
</span>
))}
</div>
</div>
</div>
<Footer />
</div>
);
};

You might also like