Everything works fine, but I have this warning Expected to return a value at the end of arrow function array-callback-return. I tried using forEach instead of map, but then <CommentItem /> doesn't even show. How do I fix this?
return this.props.comments.map((comment) => {
if (comment.hasComments === true) {
return (
<div key={comment.id}>
<CommentItem className="MainComment"/>
{this.props.comments.map(commentReply => {
if (commentReply.replyTo === comment.id) {
return (
<CommentItem className="SubComment"/>
) // return
} // if-statement
}) // map-function
} // map-function __begin
</div> // comment.id
) // returnThis question is related to
javascript
reactjs
ecmascript-6
redux
react-redux
A map() creates an array, so a return is expected for all code paths (if/elses).
If you don't want an array or to return data, use forEach instead.
The problem seems to be that you are not returning something in the event that your first if-case is false.
The error you are getting states that your arrow function (comment) => { doesn't have a return statement. While it does for when your if-case is true, it does not return anything for when it's false.
return this.props.comments.map((comment) => {
if (comment.hasComments === true) {
return (
<div key={comment.id}>
<CommentItem className="MainComment" />
{this.props.comments.map(commentReply => {
if (commentReply.replyTo === comment.id) {
return (
<CommentItem className="SubComment"/>
)
}
})
}
</div>
)
} else {
//return something here.
}
});
edit you should take a look at Kris' answer for how to better implement what you are trying to do.
class Blog extends Component{_x000D_
render(){_x000D_
const posts1 = this.props.posts;_x000D_
//console.log(posts)_x000D_
const sidebar = (_x000D_
<ul>_x000D_
{posts1.map((post) => {_x000D_
//Must use return to avoid this error._x000D_
return(_x000D_
<li key={post.id}>_x000D_
{post.title} - {post.content}_x000D_
</li>_x000D_
)_x000D_
})_x000D_
}_x000D_
_x000D_
</ul>_x000D_
);_x000D_
const maincontent = this.props.posts.map((post) => {_x000D_
return(_x000D_
<div key={post.id}>_x000D_
<h3>{post.title}</h3>_x000D_
<p>{post.content}</p>_x000D_
</div>_x000D_
)_x000D_
})_x000D_
return(_x000D_
<div>{sidebar}<hr/>{maincontent}</div>_x000D_
);_x000D_
}_x000D_
}_x000D_
const posts = [_x000D_
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},_x000D_
{id: 2, title: 'Installation', content: 'You can install React from npm.'}_x000D_
];_x000D_
_x000D_
ReactDOM.render(_x000D_
<Blog posts={posts} />,_x000D_
document.getElementById('root')_x000D_
);The most upvoted answer, from Kris Selbekk, it is totally right. It is important to highlight though that it takes a functional approach, you will be looping through the this.props.comments array twice, the second time(looping) it will most probable skip a few elements that where filtered, but in case no comment was filtered you will loop through the whole array twice. If performance is not a concern in you project that is totally fine. In case performance is important a guard clause would be more appropriated as you would loop the array only once:
return this.props.comments.map((comment) => {
if (!comment.hasComments) return null;
return (
<div key={comment.id}>
<CommentItem className="MainComment"/>
{this.props.comments.map(commentReply => {
if (commentReply.replyTo !== comment.id) return null;
return <CommentItem className="SubComment"/>
})}
</div>
)
}
The main reason I'm pointing this out is because as a Junior Developer I did a lot of those mistakes(like looping the same array multiple times), so I thought i was worth mention it here.
PS: I would refactor your react component even more, as I'm not in favour of heavy logic in the html part of a JSX, but that is out of the topic of this question.
The easiest way only if you don't need return something it'ts just return null
Source: Stackoverflow.com