React не отображает нулевые значения в ячейке с использованием строкового литерала

Question

Я не хочу отображать null для адресов 2 и 3, если пользователь не ввел значение. Может ли кто-нибудь сказать мне хороший день для этого. Спасибо

result.map((row) => (
    <TableRow key={row.name}>
       <TableCell align="center">
           {`${row.address1} ${row.address2} ${row.address3}`}
       </TableCell>
    </TableRow>
))}

Answer 1

Я думаю, что хорошим способом может быть сохранение адресов в массиве, который вы можете фильтровать и объединять следующим образом:

{
  result.map((row) => (
    <TableRow key={row.name}>
      <TableCell align="center">
        {[row.address1, row.address2, row.address3].filter(i => i).join(' ')}
      </TableCell>
    </TableRow>
  ))
}

Answer 2

На мой взгляд, нет причин для рендеринга строки шаблона внутри языка шаблонов. Почему бы не использовать язык шаблонов в своих интересах, JSX уже скрывает вывод рендеринга, если возвращается null .

Применение вышеуказанного чего-то вроде этого поможет:

<TableCell align="center">
    {row.address1} {row.address2} {row.address3}
</TableCell>

Это оставит 2 пробела между адресами 1 и 3, если 2 отсутствует. Однако HTML сворачивает соседние пробелы в одно, так что это не должно быть проблемой.

Answer 3

Вы пробовали это?

result.map((row) => (
    <TableRow key={row.name}>
       <TableCell align="center">
         {row.address1}
         {" "}
         {row.address2}
         {" "}
         {row.address3}
       </TableCell>
    </TableRow>
))}

Answer 4

Вы можете проверить, установлены ли переменные, и отобразить их соответствующим образом:

result.map((row) => (
    <TableRow key={row.name}>
       <TableCell align="center">
           {`${row.address1}${row.address2 ? " " + row.address2 : ""}${row.address3 ? " " + row.address3 : ""}`}
       </TableCell>
    </TableRow>
))}