Как удалить повторяющийся код для тернарного оператора?

Вы можете сделать следующее, чтобы очистить код:

const incommingData = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
};

// Generic function component for field
const Field = ({ data }) => {
    if (isMySpecifcField) {
        return <SpecificFieldComponent />;
    }
    return data ? data : 'Not Available';
};

// rendering the fields

{
    Object.keys(incommingData).map((fieldData) => {
        return <Field data = {fieldData} />;
    });
}

Просто перебирайте свои данные, проверяя каждое значение по ходу дела.

var data = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
    // around 200+ fields
}

for(let prop in data)
{
  console.info(data[prop] ? `<>${data[prop]}</>` : "<>Not Available<>" );
}

Просто используйте оператор ИЛИ:

<>{transit_depart || 'Not Available'}</>

Если transit_depart определено, будет использоваться значение. Если нет, он будет использовать 'Not available'.

Проблема с предыдущим решением заключается в том, что 0 также будет опущен, поскольку оно ложно. Чтобы избежать этого, вы можете использовать Нулевой объединяющий оператор (проверьте, поддерживает ли это ваша среда):

<>{transit_depart ?? 'Not Available'}</>

Один из вариантов создает функцию для проверки:

const itsAvailable = (value) => {
  return value ?? 'Not Available'
 }
 
console.info(itsAvailable(null)) // will return Not Available

console.info(itsAvailable(34)) // wil return 34

А затем просто сопоставьте объект вот так

{ Object.keys(<your object>).map(field=> itsAvailable(<your object>[field]) ) 

Я думаю, вы можете сделать следующее

const incommingData = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
};

const notAvailableMessage = 'Not Available'

// rendering the fields
function Compoennt() {
    return (
        <div>
           Field 1: {incomingData.field1 || notAvailableMessage}
           Field 2: {incomingData.field2 || notAvailableMessage}
           Field 3: {incomingData.field3 || notAvailableMessage}
        </div>
    )
}

Вы можете попробовать этот.

var data = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
    // around 200+ fields
}

Object.keys(data).forEach(x => {
  if (!data[x])
     data[x] = '<>Not Available<>'
});

console.info(data)

Допустим, это наш объект:

let transitData = {   //...
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
    // around 200+ fields
 }

Прокрутите values, проверьте, есть ли null. Если нет null, вы можете получить доступ к данным следующим образом:

return(
   <div>
     {Object.values(transitData).map((value, i) => value === null ? 'Value is Null' : console.info(Object.keys(transitData)[i], value))}
   </div>
)

Теперь, если вы хотите явно стилизовать определенный field, вам нужно создать собственную функцию проверки для этого. Вот пример того, как это может выглядеть:

const customFieldStyle = (fieldName, value) => {
    if (fieldName === 'milestatus'){
        return <span id = {custom_mile_styler}>{value}</span>
    } else {
        // this is where you'll put your default style
        return <span id = {default_field_styler}>{value}</span>
    }
}

И теперь это будет выглядеть так в рендере:

return(
   <div>
     {Object.values(transitData).map((value, i) => value === null ? 'Value is Null' : customFieldStyle(Object.keys(transitData)[i], value)}
   </div>
)

Эта функция возьмет ВСЕ пары key/value, которые не являются null, и украсит их соответствующим образом. Просто добавьте больше условных выражений для явных имен полей в customFieldStyle и визуализируйте любой тип стиля, который вы хотите, используя ваш выбор CSS и JSX.

Замена недоступных данных значением по умолчанию требует предварительного анализа. Скорее всего, многие поля могут иметь разные значения по умолчанию.

Например, 0 для определенных сумм; now на одни даты, а first day of the year на другие; " ", "TBD" или "N/A" для некоторых строк...

Вам нужен метод для сопоставления некоторых полей с определенными значениями по умолчанию для этих полей и окончательное значение по умолчанию для остальных полей.

Для предоставленных образцов данных

let data = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null    
}

мы можем захотеть, чтобы milestatus по умолчанию было равно 0, transit_depart по умолчанию было 1 января 2021 года, а все остальные поля по умолчанию были равны "N/A"; мы могли бы определить объект по умолчанию

  {
    milestatus: 0,
    transit_depart: new Date('2021-01-01')
  }

и функция setDefaults для сопоставления полей данных со значениями по умолчанию.

function setDefaults(data) {
  const someDefaults = {
    milestatus: 0,
    transit_depart: new Date('2021-01-01')
  }
  const theDefault = "N/A";  
  for (const [key, value] of Object.entries(data)) {
    if (value==null) {
      if (someDefaults[key]!=null) {
        data[key] = someDefaults[key]
      } else {
        data[key] = theDefault;
      }
    }
  }
  return data;
}

запуск функции по образцу данных setDefaults(data)

преобразовал бы data, чтобы содержать

{
  IGM_ETD:"2021-11-27T23:59:00+05:00",
  milestatus:0,
  transit_depart:"2021-01-01T00:00:00.000Z",
  etd_atd:"N/A"
}