Expected to return a value at the end of this function array-callback-return in React JS

reactjs

Solution

TLDR: The simplest fix is to use `Object.keys(this.props.ntn).forEach` instead of `.map` and make all `return rowLeft.push` just `rowLeft.push`.

Long answer:

The ESLint array-callback-return warning makes sure that you always return a value from methods like `map`, `filter` and `reduce`. You are not returning a value in you first `if` which has the following form:

if condition1 {
   if condition2 {
      return
   }
   // here you are missing a return
}
else if ...

However, you are not using `map` correctly. You should be using `forEach`.

Of course, your code can be rewritten using `map`, consider:

const {ntn} = this.props;

const rowLeft = Object.keys(ntn).map((keyName, keyIndex) => {
   const value = ntn[keyName];
   let notificationValue;   

   if (['_id', 'name', 'description', 'instant', 'active', 'beacon', 'group'].includes(keyName) {
       notificationValue = value.name.toString();
   } else if (value.offers) {
       notificationValue = value.offers.toString();
   } else {
       notificationValue = value.toString();
   }

   return (
      <InfoRow notification={keyName} notificationValue={notificationValue} key={keyIndex}/>
   );
});

Also note that in your example the first condition is never executed because it would require `keyName` to have two values at once. I have replaced it with one condition which I guess is what you want.

Problem

``` render() { const rowLeft = []; const rowRight = []; let a = this.props.ntn; Object.keys(this.props.ntn).map((keyName, keyIndex) =>{ if (keyName === "_id" || keyName === "name" || keyName === "description" || keyName === "instant" || keyName === "active") { if (keyName === "beacon" || keyName === "group") { return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].name.toString()} key={keyIndex}/>) } else if (a[keyName].offers) { return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].offers.toString()} key={keyIndex}/>) } else { return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].toString()} key={keyIndex}/>) }} }); Object.keys(this.props.ntn).map((keyName, keyIndex) =>{ if (keyName === "levelType" || keyName === "triggeringEvents" || keyName === "type" || keyName === "beacon" || keyName === "inbox") { if (keyName === "beacon" || keyName === "group") { return rowRight.push(<InfoRow notification={keyName} notificationValue={a[keyName].name.toString()} key={keyIndex}/>) } else if (a[keyName].offers) { return rowRight.push(<InfoRow notification={keyName} notificationValue={a[keyName].offers.toString()} key={keyIndex}/>) } else { return rowRight.push(<InfoRow notification={keyName} notificationValue={a[keyName].toString()} key={keyIndex}/>) }} }); return ( ``` i did something like this actually I'm fetching values and showing all the details on the page what the thing is now I'm getting this warning "Expected to return a value at the end of this function array-callback-return in React JS" Any solution? How to deal with it?

Original source