Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

246
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda