Cannot read property 'sortFunc' of undefined when trying to render react-bootstrap-table TableHeaderColumn

Question

I'm trying to render a react-bootstrap-table TableHeaderColumn using the map function. Getting error message 'sortFunc' of undefined. Works fine if i hard code the TableHeaderColumn.

I tried creating a dummy sortFunc, so it would not be undefined in the react element before rendering. Did not work.

colhdr = [
[0, 'ID',{'fieldname':'ID','label':'ID', 'iskey':true }],
[1, 'username',{'fieldname':'username','label':'User Name',  'iskey':false}],]


var columnelems = this.state.tablehdr.map ((colhdr) => {
  return (
      <TableHeaderColumn dataAlign='center' dataField={colhdr[1]} key={colhdr[0]} isKey={colhdr[2].iskey}>{colhdr[2].label}</TableHeaderColumn>
  )
});

return (
<div>
  <div class="col-xs-9 col-md-11 ml-5">
  <BootstrapTable bootstrap4 data = { this.state.tabledata }
                  height          = '40%'
                  options         ={ options }
                  selectRow       = { selectRowProp }
                  tableStyle      = { { border: 'LightSlateGrey 2.5px solid' } }
                  bodyStyle       = { { height: '87%'} }
                  hover
                  scrollTop       = { 'Bottom' }>
          {columnelems}
  </BootstrapTable>
  </div>

If I replace {columnelems} with hardcoded TableHeaderColumn elements, it works fine.

Answer 1

I had exactly the same issue today and it was because the options prop I was passing to BootstrapTable was wrong. My options were:

options = {
  defaultSortName: 'foo',
  defaultSortOrder: 'asc',
};

But foo didn't exist in my objects that I was passing to the table, causing this error.