insertRow={true} causes Invariant Violation: Objects are not valid as a React child

[silentbobbert]

I have upgraded a React app from 15.6.2 to 16.0.0, and updated react-boostrap-table too.

If my JSX looks like:

<BootstrapTable
   ref="licenceTypesTable"
   insertRow={true}
   data={this.props.licenceTypesData.licenceTypes}
   striped={true} 
   hover={true}
   options={options}
   search={true}
   exportCSV={true}>
      <TableHeaderColumn dataField="id" isKey={true} autoValue={true}>ID</TableHeaderColumn>
      <TableHeaderColumn dataField="title" dataSort={true}>Type</TableHeaderColumn>
</BootstrapTable>

Then it fails to render.

I get this console message:

Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, key, children, containerInfo, implementation}). If you meant to render a collection of children, use an array instead.
    in Modal
    in div
    in ToolBar
    in div
    in div
    in BootstrapTable
    in div
    in div
    in div

If I remove the insertRow attribute, the error goes away, and the component will render again.

I was relying on insertRow to provide UI to add new data, it would be a shame to have to roll my own.

It is helps, licenceTypes is a very simple array:

licenceTypes: [{id:1, title: "MIT"}, {id:2, title: "Apache-2.0"}]

[AllenFang]

Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, key, children, containerInfo, implementation}). If you meant to render a collection of children, use an array instead.
    in Modal
    in div
    in ToolBar
    in div
    in div
    in BootstrapTable
    in div
    in div
    in div

I guess the error is from react-modal, Because Modalis from that package. anyway, I'll check this problem from react-modal. Thanks

BTW, I can not reproduce this issue, is there something I am missing?

[silentbobbert]

Hi Allen,

Would my package.json file (the dependencies anyway) help?

I have not tried creating a new project with a minimal set of packages. I was hoping the problem would be obvious and affecting everyone.

I assume you have already done that to say you were unable to reproduce the problem. I will give it a try. I may figure out the issue doing that, so will give it a try.

Thanks
Ian

[AllenFang]

@silentbobbert what's version you used now? and would u please upgrade to newest version and try it again? thanks

[silentbobbert]

Hi Allen, I think I was using the latest version - I had been going through all my dependencies and updating them. I will try again and let you know.

[samdarcy42]

I am also experiencing this invariant violation using the 4.3.0 build.

        `    <div>
                <BootstrapTable data={products} insertRow={true} striped>
                <TableHeaderColumn dataField='id' isKey={true}>Product ID</TableHeaderColumn>
                <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
                <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                </BootstrapTable>
            </div>`

Whenever the insertRow property is added I receive the following error:

"Invariant Violation: Modal.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."

I have copied one of the example tables' code.

Any assistance is appreciated!