How do I fix Expected to return a value at the end of arrow function warning

Question

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  lt CommentItem   gt  doesn t even show  How do I fix this   x000D   x000D    return this props comments map  comment    gt             if  comment hasComments     true                   return              lt div key  comment id  gt                          lt CommentItem className  MainComment   gt                  this props comments map commentReply   gt                                   if  commentReply replyTo     comment id                       return                        lt CommentItem className  SubComment   gt                        return                      if-statement                     map-function                    map-function   begin                         lt  div gt     comment id                         return x000D   x000D   x000D

User · Accepted Answer

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   gt  commentReply replyTo     comment id     map  commentReply  idx    gt   lt CommentItem key  idx  className  SubComment   gt

User · Answer

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    gt      if   comment hasComments  return null      return        lt div key  comment id  gt                  lt CommentItem className  MainComment   gt           this props comments map commentReply   gt                           if  commentReply replyTo     comment id  return null             return  lt CommentItem className  SubComment   gt                    lt  div gt                     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

User · Answer

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    gt    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    gt      if  comment hasComments     true        return          lt div key  comment id  gt           lt CommentItem className  MainComment    gt           this props comments map commentReply   gt              if  commentReply replyTo     comment id                 return                  lt CommentItem className  SubComment   gt                                                        lt  div gt            else          return something here              edit you should take a look at Kris  answer for how to better implement what you are trying to do

User · Answer

x000D   x000D  class Blog extends Component  x000D   render    x000D    const posts1   this props posts  x000D      console log posts  x000D    const sidebar     x000D      lt ul gt  x000D       posts1 map  post    gt    x000D         Must use return to avoid this error  x000D            return  x000D         lt li key  post id  gt  x000D          post title  -  post content  x000D         lt  li gt  x000D         x000D         x000D       x000D      x000D      lt  ul gt  x000D       x000D    const maincontent   this props posts map  post    gt    x000D     return  x000D       lt div key  post id  gt  x000D        lt h3 gt  post title  lt  h3 gt  x000D        lt p gt  post content  lt  p gt  x000D       lt  div gt  x000D       x000D       x000D    return  x000D      lt div gt  sidebar  lt hr  gt  maincontent  lt  div gt  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     lt Blog posts  posts    gt   x000D    document getElementById  root   x000D     x000D   x000D   x000D

User · Answer

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

User · Answer

The easiest way only if you don t need return something it ts just return null

[javascript] How do I fix "Expected to return a value at the end of arrow function" warning?

Examples related to javascript

Examples related to reactjs

Examples related to ecmascript-6

Examples related to redux

Examples related to react-redux