BLOG/[ID].JS

import React, { useEffect, useState } from 'react';
import { curlData } from '../../components/curl';
import Link from 'next/link';
import { useRouter } from 'next/router';


const BlogLayout = (props) => {

    const router = useRouter();
    let [dataList, setDataList] = useState([]);
    let [currentBlog, setCurrentBlog] = useState([]);
    const blogName = process.env.BLOG;

    const getData = async () => {
        if(!sessionStorage["blog"])
            curlData(blogName);
        const data = (sessionStorage["blog"]);
        if(data){
            let myMap = JSON.parse(data);
            setDataList(myMap.data);
            if(myMap.data && router.query.id)
                {
                    myMap.data.forEach(e => {
                        if(e['id'] == router.query.id)
                            setCurrentBlog(e);
                    });
                }
        } else {
            setTimeout(() => getData(), 200);
        }
    }

    useEffect(() => {
        if (document.readyState === "complete") {
            getData();
        } else {
            window.addEventListener("load", getData);
            // Remove the event listener when component unmounts
            return () => window.removeEventListener("load", getData);
        }

    }, [router.query]);

    return (
        <>
            // CONTENT CLIPPED HERE
        </>
    );
}

export default BlogLayout;