Cannot assign to read only property 'children' of object '#<Object>'

[sgentile]

I'm getting the following error just setting up the sample inside my application...

import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';

render(){
        var products = [
            {
                id: 1,
                name: "Product1",
                price: 120
            },{
                id: 2,
                name: "Product2",
                price: 80
            },{
                id: 3,
                name: "Product3",
                price: 207
            },{
                id: 4,
                name: "Product4",
                price: 100
            },{
                id: 5,
                name: "Product5",
                price: 150
            },{
                id: 6,
                name: "Product1",
                price: 160
            }
        ];
        return (
            <div className="box box-blue">
                <div className="box-body">

                    <BootstrapTable data={products}>
                        <TableHeaderColumn isKey={true} dataField="id">Product ID</TableHeaderColumn>
                    </BootstrapTable>
...

I am using the latest React so not sure if that is part of the issue ?

[sgentile]

More info, the error is that it's attempting to set the readonly prop inside the TableHeader.js

_attachClearSortCaretFunc() {
    ...
      this.props.children =
        React.cloneElement(children,
          { key: 0, onSort, sort, sortIndicator });
    }
  }

[AllenFang]

@sgentile, it's a bug, I'll fix it in these day. Thanks :)

[sgentile]

Thank you sir!

[trivektor]

I encountered this too. It seemed to happen if the table only has 1 column.

[AllenFang]

@trivektor, yes!

[AllenFang]

hi all, fixes on v2.2.0