Expected to return a value at the end of arrow function

refactor this function to use return'' consistently
javascript map
javascript foreach
consistent return ignore
eslint multiple return
foreach return
map vs foreach
empty arrow function

Everything works fine, but i have this warning Expected to return a value at the end of arrow function array-callback-return, i try use forEach instead map, but then <CommentItem /> doesn't even show. How fix it?

  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"/>
                 ) // returnt
                } // 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"/>);

Expected to return a value in arrow; function array-callback-return , Why am I getting this warning and how could I clean up this hook? import { useState } from 'react' export default initialFilteredTermState  Expected to return a value at the end of arrow function. (consistent-return) in my code, I want to iterate over an array of objects, as soon as one of these objects contains the element return true otherwise at the end of loop return false. it seems that my code works but ESLint shows error [eslint] Expected to return a value at the end of arrow function. (consistent-return) but I don't want to return for instance false if the condition is false.

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.

Expected to return value in arrow function?, memo[item] = index; }, {}); var foo = Array.from(nodes, function(node) { /*error Expected to return a value at the end of this function.*/ if (node.tagName === "DIV​")  In the case that your arrow function has a single expression as the function body, that expression will be executed, and the resulting value will be implicitly returned when the function is called. const implicit = () => 'awesome' implicit() // returns 'awesome'

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.

Rule array-callback-return - ESLint, require return statements to either always or never specify values (consistent-​return). Unlike statically-typed languages which enforce that a function returns a  When your if-condition is not met, the arrow function will terminate without encountering a return statement, which violates this rule. Your second version violates this rule because your second return does not specify a value, contrary to the first return.

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

consistent-return - Rules - ESLint, The following variables are all lexical inside arrow functions: Now Prefixer works as expected: const x = 123 ; function foo ( y ) { return x ; // value received statically } Similarly to IIFEs, you should terminate IIAFs with semicolons (or use an equivalent measure), to avoid two consecutive IIAFs being interpreted as a  Require Consistent Returns (consistent-return) One of the confusing aspects of JavaScript is that any function may or may not return a value at any point in time. When a function exits without any return statement executing, the function returns undefined. Similarly, calling return without specifying any value will cause the function to return undefined.

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.

Expected to return a value at the end of arrow function array , 1:13 error Expected to return a value at the end of arrow function. The rule currenly checks for the presence of a top-level return statement at the  There was a list of all Array methods that did not expect a return value and made an exception If we can detect Promise chaining (.then().then().then()) made exception to the last arrow in the chain In my experience, the return type does not matter in event handlers (.addEventListener, .on)

13. Arrow functions, getName(); returns 'Arfat' . In the getName function, we have return this.name . Here, the value of this is keyword is the details  This rule enforces usage of return statement in callbacks of array's methods. Rule Details This rule finds callback functions of the following methods, then checks usage of return statement.

array-callback-return: Allow any return statement instead of just top , Array Map Method with Arrow Functions as Callback Function plan on using the return value from our callback function, this is likely the time As a result we end up transforming our array of objects into an array of strings. With arrow functions the this keyword always represents the object that defined the arrow function. Let us take a look at two examples to understand the difference. Both examples call a method twice, first when the page loads, and once again when the user clicks a button.

A Practical Guide to ES6 Arrow Functions,

Comments
  • Is there another return if you do not go into the if?
  • You only return if commentReply.replyTo === comment.id. If that's not the case, you don't return anything. Just put return null after the if block
  • Mikael Lennholm, may i say, you are genius
  • @RamzanChasygov some languages don't allow single-branch if statements because they lead to problems like this. You'd be doing yourself a favor if you always, always write the else branch of any if statement – if represents a fork in your code, so you need to tell the program what happens on each path; not just one.
  • What if no match found to filter
  • 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.
  • This is a short and general solution. Hope this goes to the first spot
  • Could you add some explanation how does your code solve OP's issue?