Fetch static api using react js, props loop

import React from "react";

const Menu = [
{
    id: 1,
    name: 'Samosha',
    category: 'breakfast',
    price: 200
},

{
    id: 2,
    name: 'Itely',
    category: 'Lunch',
    price: 250
},

{
    id: 3,
    name: 'Fish Carry',
    category: 'dinner',
    price: 400
},

];

export default Menu;

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Logo from './imgs/logo.png';
import Home from '../pages/Home';
import About from '../pages/About';
import Search from '../pages/Search';
import '../pages/Header.css';
import { useState } from 'react';
import MenuItem from '../pages/MenuItem';

let Header = () => {

    const [menuItem, setMenuItem] = useState(MenuItem);
    return(
           <div className="container-fluid">
                <Home menuItem = {menuItem} />
           </div>
    )

}

export default Header;

import React from 'react';
import MenuItem from "./MenuItem";

let Home = ({menuItem}) => {
    return (
        <>
           {
              menuItem.map((curEle) => {
                return(
                    <>
                    <div key = {curEle.id}>
                    <h1>ID: {curEle.id}</h1>
                    <h1>Name: {curEle.name}</h1>
                    <h1>Category: {curEle.category}</h1>
                    <h1>Price: {curEle.price}</h1>
                    </div>
                    </>
                )

              })

           }

        </>
    )
}

export default Home;