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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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