Table works until search is added

The table works but when I add the search property to the table, it gives this error:

BootstrapTable.js:1355 Uncaught TypeError: Cannot read property 'isKey' of undefined at http://localhost:3000/static/js/bundle.js:66034:31 at Array.map (native) at BootstrapTable.renderToolBar (http://localhost:3000/static/js/bundle.js:66031:31) at BootstrapTable.render (http://localhost:3000/static/js/bundle.js:65192:27) at http://localhost:3000/static/js/bundle.js:26983:22 at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:26262:13) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/static/js/bundle.js:26982:26) at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/static/js/bundle.js:27009:33) at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3000/static/js/bundle.js:26933:37) at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3000/static/js/bundle.js:26911:11)

My code:

let stagings = this.getStagingsFlattened();
let identifiers = [];
for (let i = 0; i < this.props.stagings[0].identifiers.length; i++) {
    let data = "identifiers." + i + ".value";
    identifiers.push(<TableHeaderColumn dataField={data} key={Math.random() * 99999999999999999}
    dataSort={ true }>{this.props.stagings[i].identifiers[i].name}</TableHeaderColumn>)
}
let attributes = [];
for (let i = 0; i < this.props.stagings[0].attributes.length; i++) {
    let data = "attributes." + i + ".value";
    identifiers.push(
        <TableHeaderColumn dataField={data} key={Math.random()*99999999999999999}
   dataSort={ true }>{this.props.stagings[i].attributes[i].name}</TableHeaderColumn>)
}
return (
    <div className="container">
        <BootstrapTable ref='table' data={ stagings } hover>
<TableHeaderColumn dataField='id' isKey={ true } key={Math.random()*99999999999999999} dataSort={ true }>Id</TableHeaderColumn>
{identifiers}
{attributes}
        </BootstrapTable>
    </div>
)

function flatten(o) {
    let prefix = arguments[1] || "", out = arguments[2] || {}, name;
    for (name in o) {
        if (o.hasOwnProperty(name)) {
            typeof o[name] === "object" ? flatten(o[name], prefix + name + '.', out) :
                out[prefix + name] = o[name];
        }
    }
    return out;
}

Original Json [ { “id”:1, “identifiers”:[ { “id”:2, “name”:“example”, “value”:“example” } ], “attributes”:[ { “id”:1, “name”:“example”, “value”:“example” } ] } ]

Flattened json { “0.id”:1, “0.identifiers.0.id”:2, “0.identifiers.0.name”:“example”, “0.identifiers.0.value”:“example”, “0.attributes.0.id”:1, “0.attributes.0.name”:“example”, “0.attributes.0.value”:“example” }

[AllenFang]

remove isKey={ true } and add keyField='id' on BootstrapTable

return (
    <div className="container">
        <BootstrapTable ref='table' data={ stagings } hover>
{keycolumn}
{identifiers}
{attributes}
        </BootstrapTable>
    </div>
)

but I suggest your to do render like following

return (
    <div className="container">
        <BootstrapTable ref='table' data={ stagings } hover>
            { allcolumns }
        </BootstrapTable>
    </div>
)

[AllenFang]

Very appreciate @MichielDx’s response.

Only way it works is when I merge cols1 and cols2

yes, sure, I think theres no reason for developer to generate the same thing(TableHeaderColumn) via multiple function.