Реагировать на отображение массива объектов с различными значениями, есть ли лучшая альтернатива .map?

Question

Я работаю с некоторыми данными, которые я не создал, и некоторые объекты в массиве имеют значения, а другие нет.

Я привык использовать .map для отображения деталей в массивеобъектов, есть ли способ отобразить этот изменяющийся массив объектов?

Например:

 arr = [
{
"Name": "Bob",
"Age": 56,
"Gender": "Male",
"Description": "This describes bob"
},
{
"Name": "Mary",
"Age": 32
},
{
"Name": "Tony",
"Age": 27,
"Gender": "Male"
}
]

Так как некоторые могут иметь значение пола или описания, но не все, например.

Как я привык выводить данные, например:

arr.map(item => (
<div>
<p>Name: {item.Name}</p>
<p>Gender: {item.Gender}</p>
<p>Age: {item.Age}</p>
<p>"Description: {item.Description}</p>
</div>
)

Я знаю, что если я сделаю это таким образом, я получу сообщение об ошибке, как только оно перейдет на карту с .Age или .Descriptionзначение.

Есть мысли или намеки?

Answer 1

Опция 1: Отображать запись, только если она имеет значение:

arr.map(({ Name, Gender, Age, Description }) => (
  <div>
    <p>Name: {Name}</p>
    {Gender && <p>Gender: {Gender}</p>}
    <p>Age: {Age}</p>
    {Description && <p>"Description: {Description}</p>}
  </div>
)

Опция 2: Укажите значение по умолчанию:

arr.map(({ Name, Gender = 'N/A', Age, Description = 'N/A' }) => (
  <div>
    <p>Name: {Name}</p>
    <p>Gender: {Gender}</p>}
    <p>Age: {Age}</p>
    <p>"Description: {Description}</p>}
  </div>
)