Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

247
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda