getting an error of Expected an assignment or function call and instead saw an expression no-unused-expressions in react

Question

I am getting an error of in the below

Line 56:11: Expected an assignment or function call and instead saw an expression no-unused-expressions

<div className="posts_container">
{
    (userPosts.length) ?
        (
            <div>
            {
                userPosts.map((post,idx)=>{
                    <div className="smallPost">
                        <img className='smallPost_pic' alt='post_img' src={post.imageurl}/>
                    </div>
                })
            }
            </div>
        )
        :
        (
            <h1> No posts Yet </h1>
        )
}
</div>

please help me to solve this. Thanks in advance.

Answer 1

The function that's passed to .map isn't returning anything.

So either add return :

userPosts.map((post,idx) => {
  return (
    <div className="smallPost">
      <img className='smallPost_pic' alt='post_img' src={post.imageurl}/>
    </div>
  )
})

or replace the curly braces with parentheses:

userPosts.map((post,idx) => (
    <div className="smallPost">
      <img className='smallPost_pic' alt='post_img' src={post.imageurl}/>
    </div>
  )
)

As a sidenote, remember to add a key to the div that is returned from the .map function. More about that in React's docs: Lists and Keys