React Web Structure Test2

import React, { useState, useEffect } from "react";
import Header from "../../Components/Structure/Header";
import Banner from "../../Components/Structure/Banner";
import Footer from "../../Components/Structure/Footer";
import Menu from "../../Components/Structure/Menu";
import styled from "styled-components";
import call_fetch from "../../lib/call_fetch";
import Pages from "./Pages";

const StyledContainer = styled.div`
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background: white;
    padding:1% 4%;
    justify-items : center;
`;

const item_boxes = new Array();
for(let k=0; k < 4; k++){
    let no_box = new Array();
    for(let i=0; i < 30; i++){
        no_box.push({
            "src" : `https://picsum.photos/20${(k+1)+(i+1)}`,
            "name" : "TEST",
            "price" : "$ XXX,XXX,XXX",
        })
    }
    item_boxes.push(no_box);
}

const Main = () => {
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState();
    const [content, setContent] = useState(0);
    const get_page = (no) => {
        setContent(no);
    }
    
    useEffect(async () => {
        call_fetch('http://majorworld.shop/api/config/majorworld.shop')
        .then(result => {
            setData(result);
            setLoading(false);
        });
        setLoading(false);
    }, []);
 
    return !loading? (
        <>
        <Header logo={"https://logolab.app/assets/logo.png"} />
        <Menu list={Pages} switch_page = {get_page}></Menu>
        <Banner />
        <StyledContainer>
            {React.createElement(Pages[content]["content"], {items:item_boxes[content]})}
        </StyledContainer>
        <Footer 
            c_name={data.data.company_name} 
            c_owner={data.data.company_owner} 
            c_tel={data.data.company_tel}
        />      
        </>
    ) : null;     
}

export default Main;