import React, { useState } from "react";
import "./Blogs.css";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.bundle";

function SinglePost() {
  const [data, setData] = useState(null);

  const fetchablog = async () => {
    await fetch("https://accounts.com/api/blogs")
      .then((response) => response.json())

      .then((data) => {
        setData(data);
        return data;
      });
  };

  fetchablog();

  let singlePost = "";

  singlePost = (
    <>
      <div className="onePost">
        {data &&
          data?.datas?.data.map(({ title, attachment, content, category }) => (
            <div className="sP">
              <div className="sP_img">
                <h1>{title}</h1>
                <img
                  src={"https://accounts.com/" + attachment?.media_url}
                  alt=""
                />
              </div>
            </div>
          ))}
      </div>
    </>
  );
  return (
    <>
      <div>{singlePost}</div>
    </>
  );
}

export default SinglePost;

我已经取得了网页上的所有博客API，但现在我想表明，当我点击任何博客文章，然后一个单一的博客文章将获取。
这是我获取所有博客

的图像
但是我想这样展示我的帖子。