Menu
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?
846
This callback function is run at a later time, usually through some interaction with the child component. The purpose of this callback function is to change a piece of the state that is a part of the parent component. This closes the data loop.
The React useCallback Hook returns a memoized callback function. Think of memoization as caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render.
A callback handler is passed down via React props and communicates up when the function is called. You have learned about React's event handler, inline event handler, and callback event handler and how to use them in buttons for their onClick events and in input fields for their onChange events.
The forEach() method can be used to iterate over an array outside of your JSX code in React. If you need to iterate over an array and render its elements directly in your JSX code, use the map() method instead.
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.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
