How to display data in UI using map function in reactjs?

Question

I am having a problem where I am trying to use an array of data to render a <ul> element. In the code below the console.log 's are working fine, but the list items aren't appearing.

<ul className="comments">

              {
              userComments && userComments.comments.data && userComments.comments.data.map(comment =>{
                {console.log("users", comment.user)}
                <li className="wraper" key={comment.id}>
                  <div className="comments-description">
                    <div className="comments-photo">
                      <img src="http://randomuser.me/api/portraits/men/84.jpg" alt="" />
                    </div>
                    <div className="comments_wrapper">
                      <div className="comments_details">
                        <h1>Mike Ross {comment.user}</h1>
                        <span className="days">testa</span>
                      </div>
                      <div className="comments_text">
                          {comment.value}
                
                      </div>
                      <div className="comments_edit-delete">
                        <button className="btn-danger">Delete</button>
                        <button className="btn-success">Edit</button>
                      </div>
                    </div>
                    <div className="comments_line"></div>
                  </div>
                </li>
              })
            }
          
          </ul>

Note: The data looks like this:

What am I doing wrong here?

Answer 1

The brackets are wrong. Wrap your JSX in the round brackets ( )

.map(comment =>( <li> ... </li>)

Answer 2

Either use:

.map(comment => (<ul> ... </ul>))

or

.map(comment =>({
  return (<ul> ... </ul>)
})