'React JS - How to Render My post data in one page by using props

How can I render post data on one page using props if someone clicks the post div on the home page then it reaches the post data page by using a link which I give in the backend { like if the link is the same then and only then render post data on the (sectioninner.js) } like movies website

Sectioninner.js

import React, { useState, useEffect,useRef } from 'react'
import { Link, useParams } from "react-router-dom";

function Sectioninner(post) {

    const [loading, setLoading] = useState(false);
    const { title } = useParams();
    const componentMounted = useRef(true);

    useEffect(async () => {
        setLoading(true);
        const response = await fetch('http://localhost:5000/posts');
        if (componentMounted.current) {
            (await response.json());
            setLoading(false);
        }
        return () => {
            componentMounted.current = false;
        }
    }, []);

    return (
        <>

                return (
                    <div key= {post._id}className="hey">
                        {
                            <>
                                <div className="downloadcontainer">
                                    <div className="container12">
                                        {/* Path */}
                                        <p>Home » {post.HeadingTitle}</p>
                                        {/* Categories */}
                                        <p> {post.Categories}</p>
                                        <h1>{post.HeadingTitle}</h1>
                                        <div className='titlebelow'>
                                            <span className='calender'>
                                                <img className='imgcalender' src={calender} alt="Date Modified" /> <p className='publishedcount'>{post.datetime}</p>
                                            </span>
                                            <span className='comment'>
                                                <img className='imgcomment' src={comment} alt="comments" /> <p className='commentcount'>Add a comment</p>
                                            </span>
                                            <span className='views'>
                                                <img className='imgviews' src={views} alt="views" /> <p className='viewscount'>22,439 views</p>
                                            </span>

                                        </div>
                                    </div>
                                     </>
                        
                    </div>
                )
            )}

        </>

    )
}

export default Sectioninner

in the database, i am using a link tag for rendering if the link is there then render post data else nothing to return what should I do for implemented that result in my code

{
"code": 200,
"message": "post Added Sucessfully",
"addPosts": {
    "link": "The-Boys-Season-01-02-(2019-2020)-Dual-Audio-{Hindi-English}-1080p-x264-||-1080p 10bit-||-Bluray ",
    "title": "The Boys Season 01-02 (2019-2020) Dual Audio {Hindi-English} 1080p x264 || 1080p 10bit || Bluray ",
    "image": "image_1649565125439.png",
    "HeadingTitle": "Download The Boys Season 01-02 (2019-2020) Dual Audio {Hindi-English} 1080p x264 || 1080p 10bit || Bluray ",
    "datetime": "08 April 2022",
    "smallTitle": "Download The Boys Season 01-02 (2019-2020) Dual Audio {Hindi-English} 1080p x264 || 1080p 10bit || Bluray || WEB-",
    "MoviesContent": "Parents need to know that The Boys is a dark comedy series about a world in which superheroes aren't actually the good guys. This means that the \"heroes\" in the show are constantly doing terrible things including, but not limited to, sexual assault and acts of terrorism. As a result, the show contains just about every type of adult content you can imagine -- simulated sex, male and female nudity,",
    "allCategories": "1080P,2160P,WEB-DL",
    "_id": "62525dc5b5254b12e0e08419",
    "__v": 0
},
"image": "http://localhost:5000/image_1649565125439.png"

}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source