I want to show dollar for gross sales, discounts, tax, net sales. But my below code shows dollar for only gross sales.

my code

tableHeadings = [
    "month",
    "orders",
    "gross_sales",
    "discounts",
    "tax",
    "net_sales",
  ]

reportData = [
{
    "orders": 119,
    "gross_sales": 21819.610000000008,
    "net_sales": 21819.610000000008,
    "discounts": 865.82,
    "tax": 0,
    "month": "October 2021"
},
{
    "orders": 7,
    "gross_sales": 4542.4,
    "net_sales": 4542.4,
    "discounts": 40,
    "tax": 0,
    "month": "September 2021"
}]

table

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

current page look like below, current page

expected behaviour expectation

CodePudding user response：

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

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.

CodePudding user response：

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