Initially, I included 3 elements on the page and they displayed correctly. However, when I added a few more elements, they did not show up on the browser page without any errors.
import Image from "next/image"
import getUnits from "../libs/getUnits"
export default async function UnitsPage() {
const units = await getUnits()
return (
<div className="main-container">
<h1 className="text-5xl font-bold">Units</h1>
{units.map(unit => {
return (
<>
<div key={unit.id} className="parent">
<div className="word-container">
<h2 className="word">
{unit.name}
</h2>
</div>
<div className="image-container">
<Image
src={unit.logo_way}
width={50}
height={50}
className="logo-inside-container"
/>
</div>
<div className="logo-container">
<Image
src={unit.img_way}
height={200}
width={400}
/>
</div>
</div>
</>
)
})
}
</div>
)
}
This code represents my main page content⬆️
{
"items": [
{
"id": 1,
"name": "Africa Korps",
"logo_way": "/images/afr_logo.png",
"img_way": "/images/africakorps.jpg"
},
{
"id": 2,
"name": "Wermacht",
"logo_way": "/images/wer_logo.png",
"img_way": "/images/wermacht.jpg"
},
{
"id": 3,
"name": "British Army",
"logo_way": "/images/brit_logo.png",
"img_way": "/images/british army.jpg"
}
]
}
The above JSON structure is used for data⬆️
If I try to add a fourth element to the JSON file, it does not display on the page and I am unsure of the reason why. 🤔