nextProps.data.slice is not a function

[jiaochangyang]

Hi! I am trying to integrate socket.io with your table. When I do so, I run into the following:

this.store.setData(nextProps.data.slice());

This seems to happen when I try to set the Parent state which will be passed into the table rows. This does not happen on the initial render, and only on rerenders. Thanks for your hard work with this table! It's been great.

Update: On further inspection, it seems that my whole Parent state is flowing into the BootstrapTable even though I only ever sent this.state.data to the table.

          <BootstrapTable 
                ref='table'
                data={ this.state.tableData }
                    selectRow={ this.getSelectRowProps() }
                    options={ this.getOptions() }
                    insertRow
                    deleteRow
                    search
                    columnFilter
                    hover
                    pagination>
        </BootstrapTable>

Second Update: I managed to fix this using a quick hack to check if the data was actually an array or not. However, this doesn't fix the underlying bug. Could someone explain why the whole state seemsto be passed to the table through data?

[AllenFang]

@cj285, react-bootstrap-table implement componentWillReceiveProps so any state change will rerender.

Could someone explain why the whole state seemsto be passed to the table through data?
It's the reactjs render mechanism.

How to avoid? You need implement componentWillReceiveProps in your component which contain\wrap react-bootstrap-table.

Thanks

[jiaochangyang]

Hi, I'm wondering if I explained myself properly because this seems like a bug more than a feature. The case I'm tallking about is like the following. Let's say my component that contains the react-bootstrap-table has the following state:

{
    A: [Some values]
    B: [Some values]
}

Now, I pass A to BootstrapTable by doing

<BootstrapTable data={this.state.A} />

On the first rendering, this is fine. But let's say I modified A to A'. This is where the error message occurs. At this point, data is filled with

{
    A: [New values]
    B: [New values]
}

rather than just A. (data={this.state}) Similarly if I change B. I apologize if I didn't understand your explanation. Thank you very much for the help!

[AllenFang]

On the first rendering, this is fine. But let's say I modified A to A'

how did you modify? and I really dont understand what you said.

[tkssharma]

this.store.setData(nextProps.data.slice()); // giving error unable to select the row
here i am getting error just when i am displaying data on table and unable to select row from table

var selectRowProp = {
  mode: "radio",
  clickToSelect: true,
  bgColor: "rgb(238, 193, 213)",
  onSelect: function(row, isSelected){
     console.log(row);
     console.log("selected: " + isSelected)
  }
};
// getting data from redux container 
const {authenticatedUser,admin,users } = this.props; 
<BootstrapTable
                                    data={users}
                                    striped={true}
                                    hover={true}
                                    condensed={true}
                                    selectRow={selectRowProp}
                                    insertRow={false}
                                    deleteRow={true}
                                    columnFilter={false}
                                    search={true}>
                                    <TableHeaderColumn  dataSort={true} dataField='firstName' >First Name</TableHeaderColumn>
                                    <TableHeaderColumn  dataSort={true} dataField='lastName' >Last Name</TableHeaderColumn>
                                    <TableHeaderColumn  dataSort={true} dataField='userName'>user Name</TableHeaderColumn>
                                    <TableHeaderColumn isKey={true}  dataSort={true}
                                     dataField='email' >Email</TableHeaderColumn>

                                </BootstrapTable>   

  key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.initTable(nextProps);
      var options = nextProps.options;
      var selectRow = nextProps.selectRow;

      this.store.setData(nextProps.data.slice());   // giving error unable to select the selected row 

      // from #481
      var page = this.state.currPage;
      if (this.props.options.page !== options.page) {
        page = options.page;
      }
      // from #481
      var sizePerPage = this.state.sizePerPage;
      if (this.props.options.sizePerPage !== options.sizePerPage) {
        sizePerPage = options.sizePerPage;
      }

[AllenFang]

@tkssharma, the users props is an array? And what's condition will cause this error?

[radha-bacancy]

@AllenFang can you provide an example of it.. I cannot display the data obtained from an API

[Sairav]

@AllenFang

How to avoid? You need implement componentWillReceiveProps in your component which contain\wrap react-bootstrap-table.

Hi Allen , how to wrap react-bootstrap-table inside componentWillReceiveProps ?
I am changing the state of component with the new props as follows :

  componentWillReceiveProps(nextProps){
    this.setState({data: nextProps.data})
  }

,and in render method i have my bootstrap table whose data i am setting from state , i am still getting the same original posted error "TypeError: nextProps.data.slice is not a function BootstrapTable.componentWillReceiveProps"

Will appreciate your help on this .