Expected to Return a Value At the End of Arrow Function Array-Callback-Return on Filter Function

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

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 at the end of arrow function array-callback-return on filter function

That is because the return only exits the for loop, and not the entire callback in Array.prototype.filter(). Instead of using for loop to check if companyMeasure.measure_type_id exists in self.state.measures, you can simply do an array map, which returns all the IDs, and then check against that return array if the ID exists using Array.prototype.includes:

const self = this;
const relevantCompanyMeasures = this.props.companyMeasures
.filter(companyMeasure => {
return self.state.measures.map(m => m.id).includes(companyMeasure.measure_type_id);
});

Even better:

  • since you are using arrow functions, the lexical this from the enclosing scope is preserved, so you don't even need to proxy this at all
  • you can also create the array map outside the .filter() callback to reduce overhead
  • now the .filter() callback is a one-liner, we can get rid of the curly brackets and take advantage of implicit returns in arrow functions

Here's how the final code should look like:

const ids = this.state.measures.map(m => m.id);
const relevantCompanyMeasures = this.props.companyMeasures
.filter(companyMeasure => id.includes(companyMeasure.measure_type_id));

'Expected to return a value at the end of arrow function' - Is there another way to do this other than filter?

There is a default branch you haven't provided a return value for.

                if (searchTerm === '') {
return item;
} else if (
return item.title
.toLowerCase()
.includes(searchTerm.toLowerCase()) ||
playlist.description
.toLowerCase()
.includes(searchTerm.toLowerCase())
) {
return playlist;
} else {
// return something;
}

Furthermore, item and playlist seem to be objects, which are not useful values for filtering an array since you should return a Boolean value. You might mean...

?.filter(item => {
if (searchTerm === '') {
return true;
} else if (
item.title
.toLowerCase()
.includes(searchTerm.toLowerCase()) ||
playlist.description
.toLowerCase()
.includes(searchTerm.toLowerCase())
) {
return true;
} else {
return false;
}
})

If it's the case, the function can be simpified to...

?.filter(item => (
searchTerm === '' ||
item.title
.toLowerCase()
.includes(searchTerm.toLowerCase()) ||
playlist.description
.toLowerCase()
.includes(searchTerm.toLowerCase())
);

Expected to return a value in arrow; function array-callback-return. Why?

Try Changing map(() => {}) to map(() => ())

{} - Creates a code block that expects an explicit return statement.

With () - implicit return takes place.

Array.prototype.filter() expects a value to be returned at the end of arrow function

First, you could use filter to get an array containing only the headers you want (minus noheader). Then use map to iterate through all the headers in that array and render them.

data["columns"].filter(header => (!(header.includes("noheader")))).map(header =>
return <th key = { header} > { header } < /th>;)

118:51: Expected to return a value at the end of arrow function array-callback-return

As it states, it expects you to return a value. The culprit is your call to allWebsitesData.map.

You're returning inside the if, but you don't have a fallback outside of it. Simply return null or precede your call to .map with one to .filter so you don't need the if in the first place.

Something like:

{allWebsitesData
.filter((item,index) => index >= lowerLimit && index <= upperLimit && item.name.includes(searchString))
.map(item => (
<div className="website-grid">
<div className={`website-grid-hero ${item.type}-thumbnail`}></div>
<span>{item.name}</span>
<Button variant="contained" onClick = {function(e) { getDetails(e,item.name); } } color="primary">Details</Button>
</div>
))}

react warning Expected to return a value at the end of arrow function array-callback-return

You're only returning something in the case of row being in this.props.listTableCheckedItems.

There are a couple issues here.

1: You need to return something if that is not true.

if (this.props.listTableCheckedItems.indexOf(row) === -1) {
idSelected.push(i.clientid)
return i
} else {
return ...
}

2: Your filter callback will return falsy for the first element in the list, since i is 0. Unless this is intended, you should return true or false.

if (this.props.listTableCheckedItems.indexOf(row) === -1) {
idSelected.push(i.clientid)
}
return this.props.listTableCheckedItems.indexOf(row) === -1

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

The function you pass to array.filter() should always return a truthy or falsy value. In your current code, if t.published_at % 86400 is not zero, the function doesn't return any value (it returns undefined). Additionally, if that value is zero, instead of returning something like true/false it returns the element itself.

Your function should be as simple as this:

const midnightFunction = arr => arr.map(v => v.filter(t => t.published_at % 86400 === 0));
//for demonstrationlet data = [[{published_at: 1578960000, value: 20.41}, {published_at: 1578970000, value: 23.21}],[{published_at: 1578873601, value: 14.01}, {published_at: 1578873600, value: 27.25}]];console.log(midnightFunction(data));

How to fix "Expected to return a value in arrow function" with reactjs?

Line 26:64: Expected to return a value in arrow function array-callback-return

Since you do not care about returning a value from the arrow function and you are not using the array returned by the map(), you should be using forEach() function instead.

componentDidMount() {
if(Object.keys(this.props.praticiens).length>0)
Object.keys(this.props.praticiens).forEach((praticien) => {
if(this.props.praticiens[praticien].identifiant_user === getUrlParams(window.location.hash).identifiant_user)
this.setState({
praticien:this.props.praticiens[praticien].id_user
})
})
}

handleChangePraticien = (praticien) => {
this.setState({ praticien }, () => {
Object.keys(this.props.praticiens).forEach((praticien) => {
if(this.state.praticien === this.props.praticiens[praticien].id_user)
this.props.selectPraticienFunction(this.props.praticiens[praticien].identifiant_user);
})
})



Related Topics



Leave a reply



Submit