Expected to return a value at the end of arrow function with if statement

Question

I am having this code.

{
  Object.keys(_.get(order, "customer", {})).map((key) => {
    if (key !== "defaultOption" && customer[key] !== "") {
      return (
        <option key={key} value={key}>
          {_.startCase(key)}
        </option>
      );
    }
  });
}

And having below warning

  Line 885:96:  Expected to return a value at the end of arrow function  array-callback-return

I know because I am using if statement inside the map function. So, How to get rid of the error?

Answer 1

return something after the if statement (even if it is an empty string).

You might want to filter such values out of the array afterwards (or just filter the array first instead of using an if).

Answer 2

What ESLint is telling you is that if the condition is false, your map callback doesn't return anything, so the array that map creates will have undefined there. That's often a mistake, rather than something you're doing intentionally.

Have the function return something whether the condition is true or false. For instance, you might return null if the condition is false, if you don't want React to render anything for that entry.

But instead, I'd probably filter, then map:

{
  Object.keys(_.get(order, "customer", {}))
  .filter((key) => key !== "defaultOption" && customer[key] !== "")
  .map((key) => (
      <option key={key} value={key}>
        {_.startCase(key)}
      </option>
    )
  )
}

---

Side note: I've removed the ; after map(/*...*/) in the above because it looks like it's inside a JSX expression. ; is a statement terminator, which you can't have inside a JSX expression. (Of course, if that isn't a JSX expression, ignore that change, though that would mean the code was creating options that it never used... :-) )

Answer 3

The root cause of the problem is due to return statement being inside an if condition.

This means that the function will return only when the condition is true.

The behaviour for condition being false also must be defined in order to resolve the issue.

This can be achieved in 3 ways:

• Add a filter to obtain only the interesting values in the map (Recommended)

• Add an else block to return something when condition fails

• or by adding an explicit return at the final line of the code block.

Here is an example of the suggested change:

Option 1: Add a filter to get a map of interesting values only (recommended)

Object.keys(_.get(order, "customer", {}))
    .filter( 
        (interestingValue) => (
            interestingValue !== "defaultOption" && 
            customer[interestingValue] !== ""
        ) 
    )
    .map( 
        (key) => (
            <option key={key} value={key}>
                {_.startCase(key)}
            </option>
        )
    )

Option 2: Add an else block

Object.keys(_.get(order, "customer", {}))
    .map( (key) => {
            if (key !== "defaultOption" && customer[key] !== "") {
                return (
                    <option key={key} value={key}>
                        {_.startCase(key)}
                    </option>
                )
            } else {
                return (
                    <div>condition failed</div>
                )
            }            
        }
    )

Option 3: Add an explicit return at the end of the block

Object.keys(_.get(order, "customer", {}))
    .map( (key) => {
            if (key !== "defaultOption" && customer[key] !== "") {
                return (
                    <option key={key} value={key}>
                        {_.startCase(key)}
                    </option>
                )
            }
            return undefined
        }
    )

Answer 4

You have to return something for map() to work with. You cannot 'skip' values with map().

Try returning null and then applying filter to filter out those null values afterwards.

Answer 5

Just add return null after if statement.

Answer 6

Issue is there is no else block, what if condition got false

map function expects some value in returns

{
  Object.keys(_.get(order, "customer", {})).map((key) => {
    if (key !== "defaultOption" && customer[key] !== "") {
      return (
        <option key={key} value={key}>
          {_.startCase(key)}
        </option>
      );
    } else { 
        return null;  // <----- You were missing this
    }
  });
}

OR

{
    Object.keys(_.get(order, "customer", {}))
    .filter((key) => (key !== "defaultOption" && customer[key] !== "") )
    .map((key) => (
        <option key={key} value={key}>
          {_.startCase(key)}
        </option>
      );
    );
}

Answer 7

You can convert this into a loop.

{
    (()=>{
        let arr=[];
        const keys = Object.keys(_.get(order, "customer", {}));
        for(let key of keys){
            if (key !== "defaultOption" && customer[key] !== "") {
                arr.push(<option key={key} value={key}>
                    {_.startCase(key)}
                </option>)
            }
        }
        return arr;
    })()
}

Answer 8

You need to return value outside of your if statement within your map function. Since you are not doing that you are being warned by eslint.

{
  Object.keys(_.get(order, "customer", {})).map((key) => {
    if (key !== "defaultOption" && customer[key] !== "") {
      return (
        <option key={key} value={key}>
          {_.startCase(key)}
        </option>
      );
    }
    return null;  // return value here 
  });
}

Now you can return null from within map function when your condition doesn't match as react doesn't render null values