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 proxythis
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
Javascript Function Not Defined Error (But It Is Defined)
Get List of Filenames in Folder With JavaScript
How to Convert File to Base64 in JavaScript
Javascript String With New Line - But Not Using \N
How to Kill a Running Process on Windows from Nodejs
How to Change Color of Button on Press in React Native
React Native Dynamically Change View's Background Color
Determine If String Is in Base64 Using JavaScript
Detect If User Is Using Webview for Android/Ios or a Regular Browser
How to Remove Errors Warnings from Console
Regex to Replace Everything Except Numbers and a Decimal Point
Convert Date/Time in Gmt to Est in JavaScript
Fetch() Unexpected End of Input
React-Native: Application Has Not Been Registered Error
How to Create Expand/Collapse Function for Each Row of Table - Angular6
How to Delete Rows of Data Using Sequelize