0

i have this ternary:

{item?.orderItemStatus?.name === ('PROCESSED' || 'IN_TRANSIT') ? (
            <ReturnItemButton orderItem={item} />
          ) : null}

but it only seems to work for PROCESSED. If i change the status to IN_TRANSIT it returns the null.

Why?

Aitor
  • 1
  • 1
    It's the way the expression in `()` gets evaluated. Try `console.log( ('PROCESSED' || 'IN_TRANSIT'))` and you will see it always returns `'PROCESSED'` because it is truthy so you are always testing against that first string only – charlietfl Jul 16 '21 at 11:00

2 Answers2

1

The embedded if does not work that way

name === ('PROCESSED' || 'IN_TRANSIT')

is not working the way you expected because you need

name === 'PROCESSED' || name ==='IN_TRANSIT'

or

['PROCESSED','IN_TRANSIT'].includes(name)

This is more readable

const name = item?.orderItemStatus?.name ?? null;
....
{name && ['PROCESSED','IN_TRANSIT'].includes(name) ? (<ReturnItemButton orderItem={item} />) : null}
mplungjan
  • 155,085
  • 27
  • 166
  • 222
1

Try this instead:

{ ["PROCESSED", "IN_TRANSIT"].includes(item?.orderItemStatus?.name) ? (
            <ReturnItemButton orderItem={item} />
          ) : null
}
pritam
  • 2,247
  • 1
  • 19
  • 28