How to remove repeated code for ternary operator?

You can do the following to clean up the code:

const incomingData = {
    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(incomingData).map((fieldData) => {
        return <Field data={fieldData} />;
    });
}

Simply iterate through your data, checking each value as you go.

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.log(data[prop] ? `<>${data[prop]}</>` : "<>Not Available<>" );
}

You can try this one.

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.log(data)

Let's say this is our object:

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

Loop through the values, check if null. If not null, you can access the data like so:

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

Now, if you want to explicitly style a certain field, you need to build a custom check function to do so. Here is an example of how it may look:

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>
    }
}

And now, it will look like this in render:

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

What that function will do is take ALL the key/value pairs that are not null and decorate them accordingly. Simply add more conditionals for explicit field names in the customFieldStyle and render whatever type of styling you want using your choice of CSS and JSX.

Replacing unavailable data with a default value requires a previous analysis. Most probably many fields may have different default values.

For example, 0 for certain amounts; now for some dates, but first day of the year for others; " ", "TBD" or "N/A" for some strings...

You need a method to map some fields to specific default values for those fields, and a final failover default for the rest of the fields.

For the sample data provided

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

we might want that milestatus default be 0, the transit_depart default be the Jan 1st 2021, and all the other fields default to "N/A"; we could define a defaults object

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

and a setDefaults function to map the data fields to the defaults

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;
}

running the function against the sample data setDefaults(data)

would transform data to contain

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

Just use an OR statement:

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

If transit_depart is defined, the value will be used. If not, it will use 'Not available'.

The problem with previous solution is that 0 will be also omitted since its falsy. To avoid this, you can use Nullish coalescing operator (check if your environment support it):

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

One options it create a function to validate:

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

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

And then just map the object like this

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

I think you can do the following

const incomingData = {
    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>
    )
}