CODEWITHSUNDEEP
twitter-bootstrapreactjspaginationreact-bootstrap-table
developer_beginning
developer_beginning

Reputation: 393

ReactJS pagination error "Cannot read property 'slice' of undefined"

var environmentList=this.state.returnJSONValue;
console.log("result for: environmentList hi :"+this.state.returnJSONValue);

return (
    <div>
        <div className="row">
            <div className="col-lg-12">
                <h3 className="page-header">
                    Docker Images
                </h3>
            </div>
        </div>
        <div className="row">
            <div className="col-lg-3 col-md-6">
                   {environmentList}
            </div>
        </div>

        <BootstrapTable data={environmentList} striped hover pagination>
            <TableHeaderColumn isKey dataField='id'>#</TableHeaderColumn>
            <TableHeaderColumn dataField='name'>Environment</TableHeaderColumn>
            <TableHeaderColumn dataField='price'>Deploy</TableHeaderColumn>
        </BootstrapTable>

    </div>
)

I am using above code to create a table with react bootstrap and want to implement pagination on the table but i am getting the following error.Kindly let me know if any solution:

index.js:56493 Uncaught TypeError: Cannot read property 'slice' of undefined
    at new BootstrapTable (index.js:56493)
    at ReactCompositeComponentWrapper.mountComponent (index.js:14894)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (index.js:9084)
    at Object.mountComponent (index.js:13276)
    at ReactDOMComponent.mountChildren (index.js:21846)
    at ReactDOMComponent._createContentMarkup (index.js:19021)
    at ReactDOMComponent.mountComponent (index.js:18909)
    at Object.mountComponent (index.js:13276)
    at ReactCompositeComponentWrapper.mountComponent (index.js:14971)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (index.js:9084)

Upvotes: 2

Views: 1701

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104479

Changes:

1- React Bootstrap table accept array of object in data property, that should contain the keys u defined in dataField in TableHeaderColumn. In you case environmentList should be like this:

[
  {id:1, name: 'A', price: 1},
  {id:2, name: 'B', price: 2}, 
  {id:3, name: 'C', price: 3}
]

2- Since your environmentList is an array, you can't render it directly in html like this: {environmentList}, you need to render the specific property like this: {environmentList[0].name}.

3- Your environmentList should not be undefined or null, otherwise table will throw error, to ensure that use it environmentList || [], 

<BootstrapTable data={environmentList || []} striped hover pagination>
    <TableHeaderColumn isKey={true} dataField='id'>#</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Environment</TableHeaderColumn
    <TableHeaderColumn dataField='price'>Deploy</TableHeaderColumn>
</BootstrapTable>

I think you are getting the error because of that only, if your environmentList would have been proper then JSX would have thrown error of render an array in html.

Make the change it should work.

Upvotes: 1

Related Questions