Rendering column headers, some of them with a cellRenderer attribute

Question

How can I make this code block shorter? I'm repeating myself, because of this prop cellRenderer.

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

Answer 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
 label={header.label}
 dataKey={header.id}
 disableSort
 width={100}
 flexGrow={1}
 cellRenderer={header.index ? this._generateCheckbox : undefined}
 />
 )
})}

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
 label={header.label}
 dataKey={header.id}
 disableSort
 width={100}
 flexGrow={1}
 {...extraProps}
 />
 )
})}