I am trying to get familiar with NextJS so I am building a simple blog. The data is passed thru props and can be console logged inside of the map function, but for some reason will not display any HTML in a browser. no errors to be shown. Prettier in VScode also had to be turned off bc it was adding ";" every time I would save this map function
<div>
{post.map((post) => {
{console.log(post.description + "here")}
<h1>post</h1>
})}
</div>
console log will show up in the console but the h1 does render to screen.
Does anybody have some advice?
Firstly, you need to check post.map((post) => (...). They're having the same variable post from inner to outer. It should be posts.map((post) => (...)) (with posts for the loop)
map function also expects a return value, but you haven't returned any value
<div>
{posts.map((post) => {
return <h1>post</h1>
})}
</div>
The shorter version (without brackets)
<div>
{posts.map((post) => <h1>post</h1>)}
</div>
I'd suggest you have key in map results too that would help React recognize your unique elements in posts for re-rendering
<div>
{posts.map((post) => <h1 key={post.id}>post</h1>)} //`post.id` is a unique value
</div>
<div>
{post.map((post) => (
{console.log(post.description + "here")}
<h1>post</h1>
))}
</div>The map function was not not returning anything . so added the parenthesis or you can use return() and paste the console section