Cómo verificar si mi {row.storeId} es nulo o está vacío y, si ese es el caso, quería colocar NA en <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> ))}¿Solo comprobarlo?
<TableCell>{row.storeId ? row.storeId : 'NA'}</TableCell>Obtenga más información sobre los operadores ternarios aquí , aunque esto también se puede hacer sin uno:
{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> ); })}Simplemente puede verificar si es nulo o no de la siguiente manera:
Operador coalescente nulo (??)
<TableCell>{row.storeId ?? 'NA'}</TableCell> No puede usar un operador lógico or ternary si storeId es 0 , es decir, Falsy Value , entonces imprimirá 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")simplemente puede hacer esto, pero tenga en cuenta que enfrentará un problema con la clave de la fila
{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> ))}