[英]How to display data in UI using map function in reactjs?
I am having a problem where I am trying to use an array of data to render a <ul>
element.我在尝试使用数据数组呈现
<ul>
元素时遇到问题。 In the code below the console.log
's are working fine, but the list items aren't appearing.在下面的代码中
console.log
工作正常,但列表项没有出现。
<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?我在这里做错了什么?
The brackets are wrong.括号是错误的。 Wrap your JSX in the round brackets ( )
将 JSX 包裹在圆括号 ( ) 中
.map(comment =>( <li> ... </li>)
Either use:要么使用:
.map(comment => (<ul> ... </ul>))
or或者
.map(comment =>({
return (<ul> ... </ul>)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.