www-myfit/src/component/Blog/BlogSingle/Main.js

import React, { useEffect, useState } from "react";
import { Link, useLocation } from 'react-router-dom'
import Bredcrumb from '../../Bredcrumb/Main'
import BGImg from "../../../assets/images/bread_crumb_bg.png"
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
import { useParams } from "react-router-dom";

const Main = ({brdcum}) => {

    const { id } = useParams();
    const location = useLocation();
    const data = location.state?.data;
    
    console.log("location", location, data);
    
  return (
    <>
        
        {brdcum.b1 && 
        <Bredcrumb 
        no={1}
        title="Blog details" 
        tag="Blog single" 
        bgimg={BGImg}/>}

        {brdcum.b2 && 
        <Bredcrumb 
        no={2}
        title="Blog details" 
        tag="Blog single" 
        bgimg={BGImg1}/>}

        {brdcum.b5 && 
        <Bredcrumb 
        no={5}
        title="Blog details" 
        tag="Blog single" 
        bgimg={BGImg}/>}

        {brdcum.b3 && 
        <Bredcrumb 
        no={3}
        title="Blog details" 
        tag="Blog single" />}

        {brdcum.b4 && 
        <Bredcrumb 
        no={4}
        title="Blog details" 
        tag="Blog single" 
        bgimg={BGImg2}/>}

        <section className="blog_detail_section">
            <div className="container">
                <div className="blog_inner_pannel">
                    <div className="review">
                        <span>Review</span>
                        <span>{new Date (data && data.post_modified).toDateString()}</span>

                    </div>
                    <div className="section_title">
                        <h2>{data && data.post_title}</h2>
                    </div>
                    <div className="main_img">
                        <img src={data && data.meta_value} alt="image" />
                    </div>
                    <div className="info">
                        <h3>{data && data.post_name}</h3>
                    <div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
         
                    </div>
                   
                    <div className="blog_authore">
                        <div className="authore_info">
                            <div className="avtar">
                                {/* <img src="assets/images/blog_d02.png" alt="image" /> */}
                            </div>
                            <div className="text">
                                {/* <h3>{data && data.post_author}</h3> */}
                                <span>{new Date (data && data.post_date).toDateString()}</span>

                            </div>
                        </div>
                        <div className="social_media">
                            <ul>
                                <li><Link to="#"><i className="icofont-facebook"></i></Link></li>
                                <li><Link to="#"><i className="icofont-twitter"></i></Link></li>
                                <li><Link to="#"><i className="icofont-instagram"></i></Link></li>
                                <li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
            </div>
        </section>


        <section className="row_am comment_form_section">
            <div className="container">
                <div className="section_title">
                    <h2>Leave a <span>comment</span></h2>
                    <p>Your email address will not be published. Required fields are marked *</p>
                </div>
                <form action="">
                    <div className="row">
                        <div className="col-md-6">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Name *" />
                        </div>
                        </div>
                        <div className="col-md-6">
                        <div className="form-group">
                            <input type="email" className="form-control" placeholder="Email *" />
                        </div>
                        </div>
                        <div className="col-md-6">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Phone" />
                        </div>
                        </div>
                        <div className="col-md-6">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Website  " />
                        </div>
                        </div>
                        <div className="col-md-12">
                        <div className="form-group">
                            <textarea className="form-control" placeholder="Comments"></textarea>
                        </div>
                        </div>
                        <div className="col-md-12 text-center">
                        <button className="btn puprple_btn" type="submit">POST COMMENTS</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>

        <section className="row_am latest_story" id="blog">
            <div className="container">
                <div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                    <h2>Read latest <span>story</span></h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                </div>
                <div className="row">
                    <div className="col-md-4">
                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                            <div className="story_img">
                            <img src="assets/images/story01.png" alt="image" />
                            <span>45 min ago</span>
                            </div>
                            <div className="story_text">
                                <h3>Cool features added!</h3>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
                                industry lorem Ipsum has.</p>
                                <Link to="#">READ MORE</Link>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-4">
                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                            <div className="story_img">
                            <img src="assets/images/story02.png" alt="image" />
                            <span>45 min ago</span>
                            </div>
                            <div className="story_text">
                                <h3>Top rated app! Yupp.</h3>
                                <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
                                <Link to="#">READ MORE</Link>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-4">
                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                            <div className="story_img">
                            <img src="assets/images/story03.png" alt="image" />
                            <span>45 min ago</span>
                            </div>
                            <div className="story_text">
                                <h3>Creative ideas on app.</h3>
                                <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
                                <Link to="#">READ MORE</Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </>
  )
}

export default Main