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

Question

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

Matthew Herbst · Accepted Answer · 2022-07-20 20:12:36Z

3

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

answered Jul 20, 2022 at 20:12

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GodWin1100 Over a year ago

Ternary operator will fail if storeId is 0 or Falsy value

Matthew Herbst Over a year ago

Yes, certainly something to look out for if your ids are numbers

GodWin1100 Over a year ago

@MatthewHerbst yes and therefor it's adviced to use Nullish coalescing operator (??) which checks for null and undefined.

Matthew Herbst Over a year ago

@GodWin depends on what you are trying to support. For example, older browsers will not support ?? so you will have to transform the code through a tool such as babel, while a ternary will "just work". Always tradeoffs when writing client-side code

GodWin1100 · Accepted Answer · 2022-07-20 20:29:24Z

2

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

edited Jul 20, 2022 at 20:29

answered Jul 20, 2022 at 20:23

GodWin1100

1,4301 gold badge8 silver badges14 bronze badges

Comments

Mohammed naji · Accepted Answer · 2022-07-20 20:13:45Z

1

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

answered Jul 20, 2022 at 20:13

Mohammed naji

1,1121 gold badge13 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related