How can I use the url plus the ID's in an array to fetch a single object using the resourse url-CodePudding

I want to get a single object returned from a database of objects using the object ID and the resource URL.

Tried this but isn't working instead I am seeing singlepost:id on hover on the <a></a> tag.

<a href="SinglePost:id">Read More......</a>

I want to get the singlepost/id=1 so I can send a query to get only the object with the Id of 1.

import "./post.css";
import DateTime from "./DateTime";
import { useEffect, useState } from "react";

export default function Post() {
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    fetch("  http://localhost:8005/posts")
      .then((res) => {
        if (res.status !== 200) {
          throw Error("Post can not be found");
        } else {
          return res.json();
        }
      })
      .then((data) => {
        setPosts(data);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  console.log(posts);
  return (
    <div className="posts">
      {posts &&
        posts.map(({ id, image, posttitle, postdate, postdesc }) => {
          return (
            <div key={id} className="post">
              <img src={image} alt="imagedescription" className="postimage" />
              <div className="postinfo">
                <div className="postcats">
                  <span className="postcast">Music</span>
                  <span className="postcast">Life</span>
                  <span className="postcast">Music</span>
                </div>
                <span className="posttitle">
                  {id}. {posttitle}
                </span>
                {/* <hr /> */}
                <span className="postdate">{postdate}</span>
              </div>
              <p className="postdesc">{postdesc}</p>
              <span>
// tried this but isnt working instead i am seeing singlepost:id on hover on the <a></a> tag. 

                <a href="SinglePost:id">Read More......</a>

// I want to get the singlepost/id=1 so I can send a query to get only the object with the Id of 1
              </span>
            </div>
          );
        })}
    </div>
  );
}

CodePudding user response：

Use template strings


    <div className="posts">
      {posts &&
        posts.map(({ id, image, posttitle, postdate, postdesc }) => {
          return (
            <div key={id} className="post">
              <img src={image} alt="imagedescription" className="postimage" />
              <div className="postinfo">
                <div className="postcats">
                  <span className="postcast">Music</span>
                  <span className="postcast">Life</span>
                  <span className="postcast">Music</span>
                </div>
                <span className="posttitle">
                  {id}. {posttitle}
                </span>
                {/* <hr /> */}
                <span className="postdate">{postdate}</span>
              </div>
              <p className="postdesc">{postdesc}</p>
              <span>
                <a href={`singlepost/id=${id}`}>Read More......</a>
              </span>
            </div>
          );
        })}
    </div>