React: contidional if its in a component

I have an array of Objects, How can I write a conditional that push an Object in that array IF I’m in certain componente. (In componente <A/> headCell will be normal, but in component <B/> headCell will have an extra object)

It would be something like

if (<MyAwesomeComponent />)  {
  headCells.push( { key:value, key2, value2 } )
}

  const headCells = [
    {
      id: 'applicant.full_name',
      label: t('application-table-heads.name'),
    },
    {
      id: 'stage',
      label: t('application-table-heads.stage'),
    },
    {
      id: 'date_submitted',
      label: t('application-table-heads.date-submitted'),
    },
    {
      id: 'position',
      label: t('application-table-heads.position'),
    },
    {
      id: 'status',
      label: t('application-table-heads.status'),
    },
  ]

You seem to be over-abstracting things. What you’re trying to do is overcomplicated. There is a way to do what I think you are describing, sort of, but only in some specific circumstances and it makes very little sense.

If you are checking that a component is specific type of component inside a component, you already know at that point. If you are checking in a component that will be reused (eg in a component that renders a table to be used in several components), then you are introducing inheritance and tight coupling, which is something you should want to avoid.

Don’t try to do magic trickery to avoid doing the simple thing that works (passing arguments to the component function).

Firstly, are re there many variations of these components? Or are there just one or two?

Second, I assume you’re using an i18n library; that’s already a way of defining text as a set of keys, so you’re layering abstractions on top of abstractions for what looks like a way to save a small amount of typing.

So for example

function MyTableHead ({ titleKeys }) {
  return (
    <thead>
      <tr>
        { titleKeys.map((k) => <th key={k}>{ t(`application-table-heads.${k}`) }</th>)}
      </tr>
    </thead>
  )
}

Then like following, just passing the keys you want into the function

<MyTableHead titleKeys={[ name, stage, date-submitted ]} />

Even this is a bit too much of an abstraction imo, and explicitly ties the component to the way the i18n structure is defined.