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

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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