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?

Mayank Pandeyz · Accepted Answer · 2020-06-22 18:14:05Z

1

Either use:

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

or

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

answered Jun 22, 2020 at 18:14

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valery Burtsev · Accepted Answer · 2020-06-22 18:12:28Z

1

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

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

answered Jun 22, 2020 at 18:12

Valery Burtsev

762 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related