# 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) => {
<Column
disableSort
width={100}
flexGrow={1}
cellRenderer={this._generateCheckbox}
/>
) : (
<Column
disableSort
width={100}
flexGrow={1}
/>
);
})}


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) => {
return (
<Column
disableSort
width={100}
flexGrow={1}
/>
)
})}


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

{headers.map((header, i) => {
let extraProps = header.index ? {
cellRenderer: this._generateCheckbox
} : {}
return (
<Column