Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
        ) // return

The warning indicates that you're not returning something at the end of your map arrow function in every case.

A better approach to what you're trying to accomplish is first using a .filter and then a .map , like this:

this.props.comments
  .filter(commentReply => commentReply.replyTo === comment.id)
  .map((commentReply, idx) => <CommentItem key={idx} className="SubComment"/>);
                If no comments matches the filter, an empty array will be returned. That will be passed to .map, which in turn will be a no-op. In other words - if there's no match, nothing will be rendered.
– Kris Selbekk
                Mar 17, 2019 at 11:43
                As Zanon suggested below, an easier and less complex option is to simply use forEach that doesn't expect to return anything instead of map that do expect to return something.
– Emanuel Lindström
                Jul 28, 2020 at 15:05
                A good option for lists of React components, where it's better for reconciliation to see a consistent number of elements with some nulls than an entirely different list.
– Noumenon
                Dec 2, 2022 at 9:20
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"/>
  } else {
     //return something here.
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"/>
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.
You can use the for loop like so:
for(let i = 0 ; i < comments.length; i++){
 if(comments[i].hasComments === true){
return (
       <div key={comments[i].id}>
        //content Here
      </div> // comment.id
const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.