React - passing this.state as prop

Question

I've tried researching everywhere I can but I'm stuck on why my code wont work.

I'm trying to update this.state with new data and then pass this to the react-bootstrap-table tool ( http://allenfang.github.io/react-bootstrap-table/example )

I'm trying to pass this.state as a prop in the "data" prop, however when I try this I get the following error:

react-bootstrap-table.min.js:18 Uncaught TypeError: n.props.data.slice is not a function

I've googled the error and got to this document ( https://github.com/AllenFang/react-bootstrap-table/issues/605 ) which talked about using a componentWillReceiveProps but I've had no luck with this.

Any help would be massively appreciated.

Steve

class App extends React.Component {

constructor(props){
super(props);
this.state = {

};
this.getData = this.getData.bind(this);
}

//method to fetch data from url  
getData(url){

fetch(url)
  .then(function(resp){
    return resp.json();
  })
  .then(data => {
    //do something with the data

  this.setState(data)

  }) 
} //end of getData function

componentDidMount(){
//Details location of our data
var url = "https://fcctop100.herokuapp.com/api/fccusers/top/recent";

//fetches data from url

this.getData(url);   
} //end of componentDidMount


render(){

return (
<BootstrapTable data={this.state} striped hover>
  <TableHeaderColumn isKey dataField='username'>Username</TableHeaderColumn>
  <TableHeaderColumn dataField='recent'>Recent Score</TableHeaderColumn>
  <TableHeaderColumn dataField='alltime'>All Time Score</TableHeaderColumn>
</BootstrapTable>

);
}


} //end of App class
ReactDOM.render(<App data = {this.state}/>,
            document.getElementById('app'));

Answer 1

Change your render method to something like below. You need to send data that is fetched in getData and not the whole state object to the BootstrapTable . Moreover, the data you get back in the .then should match BootstrapTable's expectation of data.

Also remember that this.state.data will not be populated when the component first renders. Only after fetchUrl fulfils this.state.data will be populated.

render(){

  return (
    <BootstrapTable data={this.state.data || []} striped hover>
      <TableHeaderColumn isKey dataField='username'>Username</TableHeaderColumn>
      <TableHeaderColumn dataField='recent'>Recent Score</TableHeaderColumn>
      <TableHeaderColumn dataField='alltime'>All Time Score</TableHeaderColumn>
    </BootstrapTable>

  );
}