I'm trying to understand why this error is appearing in my table, I couldn't find similarities in other questions around here.

function Table({ data }) {
  return (
    <table className="main-table">
      <thead>
        <tr>
          {data["columns"].filter((header) => {
            if (!header.includes("noheader")) {
              return <th key={header}>{header}</th>;
            } else {
              return false;
            }
          })}
        </tr>
      </thead>
    </table>
  );
}

Raised error Line 15:53: Array.prototype.filter() expects a value to be returned at the end of arrow function array-callback-return

I'm trying to understand why this error is appearing in my table, I couldn't find similarities in other questions around here.

function Table({ data }) {
  return (
    <table className="main-table">
      <thead>
        <tr>
          {data["columns"].filter((header) => {
            if (!header.includes("noheader")) {
              return <th key={header}>{header}</th>;
            } else {
              return false;
            }
          })}
        </tr>
      </thead>
    </table>
  );
}

Raised error Line 15:53: Array.prototype.filter() expects a value to be returned at the end of arrow function array-callback-return

• javascript
• reactjs

Share Improve this question Follow asked Jun 14, 2022 at 13:30 CollaxdCollaxd 18144 silver badges1212 bronze badges 3

• 5 Filter method only returns those elements for which its callback returns true. Solution: 1. Filter the data["columns"] array with those headers that don't include 'noheader'. 2. Use the map() method to return <th> element: data['columns'].filter(...).map(header => <th>...</th>) – Yousaf Commented Jun 14, 2022 at 13:32
• 3 You need to use map function instead of filter and return null in the else part – Pranavan Commented Jun 14, 2022 at 13:32
• 2 Don't return a ponent in the filter. Filter with a boolean and then map the results. filter(x => x.includes('noheader')).map ... – evolutionxbox Commented Jun 14, 2022 at 13:32

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

filter expects a boolean to be returned for each item in the array you are filtering. If true is returned the item is added in the resulting array.

If you want to alter the array instead of filtering it use another method, like map

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>;)

Array.filter wants a return of true or false to determine whether the new array will contain the element it is checking. If you want to mutate the array in some way, you may want to consider Array.reduce(), as it can both filter and mutate the returned array (or really do many other things as well).

Filter this array first. Then you can use .map()

 function Table({ data }) {
  return (
    <table className="main-table">
      <thead>
        <tr>
          {data["columns"].filter((e => !e.includes("noheader")).map(header => <th key={header}>{header}</th>))}
        </tr>
      </thead>
    </table>
  );
}