How to remove the null or empty values in map of the React table-CodePudding

How to check if my {row.storeId} is null or empty and if that's the case, I wanted to place NA in <TableCell>.

{props.tableData.map(row => (
          <TableRow key={row.storeId}>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.storeId}</TableCell>
            <TableCell>{concatenateAddress(row.address)}</TableCell>
            <TableCell>{capabilitiesColumn(row.capabilities)}</TableCell>
          </TableRow>
        ))}

CodePudding user response：

Just check for it?

<TableCell>{row.storeId ? row.storeId : 'NA'}</TableCell>

Learn more about ternary operators here, though this could also be done without one:

{props.tableData.map(row => {
  let storeId = row.storeId;
  if (!storeId( {
    storeId = 'NA';
  }

  return (
    <TableRow key={row.storeId}>
      <TableCell>{row.name}</TableCell>
      <TableCell>{storeId}</TableCell>
      <TableCell>{concatenateAddress(row.address)}</TableCell>
      <TableCell>{capabilitiesColumn(row.capabilities)}</TableCell>
    </TableRow>
  );
})}

CodePudding user response：

You can simple check whether it's null or not as follows:
Nullish coalescing operator (??)

<TableCell>{row.storeId ?? 'NA'}</TableCell>

You cannot use logical or and ternary opreator if storeId is 0 i.e. Falsy Value then it will print Na

<TableCell>{row.storeId || 'NA'}</TableCell>
<TableCell>{row.storeId ? row.storeId : 'NA'}</TableCell>

const a=0
const b=1
const c=null
console.log("Logical OR (||)")
console.log(a||"Na")
console.log(b||"Na")
console.log(c||"Na")


console.log("Nullish coalescing operator (??)")
console.log(a??"Na")
console.log(b??"Na")
console.log(c??"Na")


console.log("Ternary Operator")
console.log(a?a:"Na")
console.log(b?b:"Na")
console.log(c?c:"Na")

CodePudding user response：

you can simply do this but take into your consideration that you will face an issue with the key of the row

{props.tableData.map(row => (
          <TableRow key={row.storeId}>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.storeId || 'NA'}</TableCell>
            <TableCell>{concatenateAddress(row.address)}</TableCell>
            <TableCell>{capabilitiesColumn(row.capabilities)}</TableCell>
          </TableRow>
        ))}