So I am trying to render some data from a json file in react js, but when I try to run it, it always show an error that it cannot read the parent of a certain data from the json because it's undefined even though I am sure that I put it right.
Json file:
{
"item": [
{
"name": "item"
}
]
}
Code:
const main = ({ backEndData }) => {
return (
<div className='main'>
{
backEndData.items.item.forEach(product => {
return (
<p>{product.name}</p>
)
})
}
</div>
)
}
Error:
I am getting the json file from my backend server btw
I advise you to read about the difference between map and foreach (forEach never return smth). Try displaying items in the console (they are not defined). I can assume that your code will look like this:
backEndData.item.map(product =>
<p>{product.name}</p>
);