Conditionally specify columns does not work

I want conditionally specify which columns table will have. Usually I use ternary operator to hide something in the React by this does not work with React Bootstrap table. See example below.

export const BetDistributionTable = (props: BetDistributionTableProperties) => {
    const betType = props.showBetType
        ? <TableHeaderColumn width="200" dataField="betType" dataSort={true} isKey={true}>Тип ставки</TableHeaderColumn>
        : null;
    return <BootstrapTable data={props.data} bordered condensed hover trClassName=""
        options={{ defaultSortName: "date", defaultSortOrder: "desc" }}>
        <TableHeaderColumn width="200" dataField="date" dataSort={true} isKey={true}
            dataFormat={dateFormatter}>Date</TableHeaderColumn>
        {betType}
    </BootstrapTable>;
}

[AllenFang]

ok, got it, but one more question, if you used hidden on TableHeaderColumn is helpful for you?

[kant2002]

The problem not in the isKey or such. I think very often in React use following pattern

const header = showHeader ? <h1>Header</h1> : null
return <div>{header}</div>;

When I construct <TableHeaderColumn> objects like that React Bootstrap table does not like it.

I have table with 10 columns and couple of them could be shown/hidden as needed. I definitely could create workaround which will produce array of <TableHeaderColumn> components but think that RBT will benefit from having such simple way to dynamically create columns.