Rendering column headers, some of them with a cellRenderer attribute How can I make this code block shorter? I'm repeating myself, because of this prop cellRenderer.

{headers.map((header, i) =&gt; {
  return header.index ? (
    &lt;Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
      cellRenderer={this._generateCheckbox}
    /&gt;
  ) : (
    &lt;Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
    /&gt;
  );
})}
Passing undefined in for cellRenderer should be the same as not passing it in at all. Because of this, the duplication can be removed by doing the following: 

{headers.map((header, i) =&gt; {
  return (
    &lt;Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
      cellRenderer={header.index ? this._generateCheckbox : undefined}
    /&gt;
  )
})}


Alternatively, you can build up an extraProps object and then spread it into the column. 

{headers.map((header, i) =&gt; {
  let extraProps = header.index ? {
    cellRenderer: this._generateCheckbox
  } : {}
  return (
    &lt;Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
      {...extraProps}
    /&gt;
  )
})}