Map function will not render in nextJS-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

 <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