Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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>
        ))}
about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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>
  );
})}
about 4 years ago · Santiago Trujillo Report

0

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

about 4 years ago · Santiago Trujillo Report

0

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>
        ))}
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!