Its should be

(item === 'gross_sales' || item === 'discounts' || item === 'tax' || item === 'net_sales' || item === 'average_amount' || item === 'total_spent')

What is the issue with your syntax?

You are checking with

item === ('gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent')

What this will do is it will evaluate the expression

console.log('gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent')

Its output will be 'gross_sales' which is the first string. So your expresion work only with 'gross_sales'. For rest all, the value will be false.

You are only comparing item === "gross_sales", either you need to seperately compare each of them

Ex: item === "gross_sales" || item === "discounts" etc.

But the best solution is to put these options in an array and then arrayName.includes(item), should give the expected result.

The problem is that you cannot group OR values like you did. You need to state item equality for every value.

<tbody>
  {reportData.length > 0 &&
    tableHeadings.length > 0 &&
    reportData.map((element, index) => (
      <tr key={index}>
        {tableHeadings.map((item, idx) => (
          <td key={idx}>
            {(item === 'gross_sales' ||
              item === 'discounts' ||
              item === 'tax' ||
              item === 'net_sales' ||
              item === 'average_amount' ||
              item === 'total_spent') &&
              dollar}{' '}
            {element[item]}
          </td>
        ))}
      </tr>
    ))}
</tbody>;

What you did in that OR statement you always return gross_sales string.

This is because gross_sales is thruty and it will never go to the rest of the values. That is why you only match 'gross_sales'

console.log(('gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent'))

// logs: 'gross_sales