CODEWITHSUNDEEP
javascriptreactjs
Umar Abdullah
Umar Abdullah

Reputation: 11

I want to preview my posts on single page by its specific _id

This is my code I want to show My blog on this Page:

import axios from "axios";
import React, { useEffect,useState }from "react";
import Footer from "../../src/components/Footer"
import Header from "../../src/components/Header";
import { useParams } from 'react-router-dom';



export default function BlogPreview(props) {



let obj ={
 title: "",
 description: "",
 urlToImage: "",
}


let url = axios.post('/API',obj)

const { id } = useParams();
const [blog, setBlog] = useState(null);

useEffect(() => {

let blog = url.data.find((blog) =>blog.id === parseInt(id));
if (blog) {
  setBlog(blog);
  console.log(blog);
}

}, [obj]);

return ( <> 

    <div className="container-fluid py-5">
      <div className="col-6 BlogPreviewBox px-5 ">
        <div className="d-flex justify-content-center">
          <img className="display-blog-box my-5" src="/" src={blog.urlToImage}></img>
        </div>
       
        <h1 className="blog-preview-heading">
          {blog.title} 
        </h1>
        <div className="d-flex flex-column align-items-center">
          <span className="text-center py-3">07 December 2021</span>
          <button className="btn-blog-display">2 min read</button>
        </div>
        
      </div>

      <div className="row display-blog-content-row">
       
            <p>{blog.description}</p>
 
      </div>
    </div>
    <Footer/>
    </>

) }

I Want to know how to do it by using Blog _id here I extract _id but it doesn't work you can see in below code :

     <Link href={`/Blogs/BlogPreview/${id}`} >
          <button className="btn-blog-display">2 min read</button>
     </Link>

please solve this problem by creating a example code I was stuck here from 2 weeks but I can't see a solution of this problem I hope some one solve this problem for me.

Upvotes: 1

Views: 39

Answers (1)

Mayur Vaghasiya
Mayur Vaghasiya

Reputation: 1482

You pass the wrong parameter in Link

Try this code it's help you !

  <Link to="/Blogs/BlogPreview" params={{ id: id }}>
      <button className="btn-blog-display">2 min read</button>
  </Link>

For handle .find() not a function

  const { id } = useParams();
  const [blog, setBlog] = useState({ urlToImage: "", title: "", description: "" });

  useEffect(() => {
    axios.post('{API_URL}/blog/getblog').then((url) => {
      let blog = url.find(({ blog }) => blog.id === parseInt(id));
      if (blog) {
        setBlog(blog); console.log(blog)
      }
    });
  }, [blog]);

Upvotes: 1

Related Questions