0

I try to run fixed data table with this code.

   var MyCompi=React.createClass({
   getInitialState: function() {

   return{ rows : [{"id":1,"first_name":"William","last_name":"Elliott","email":"welliott0@wisc.edu",
"country":"Argentina","ip_address":"247.180.226.89"},
{"id":2,"first_name":"Carl","last_name":"Ross","email":"cross1@mlb.com",
"country":"South Africa","ip_address":"27.146.70.36"},
{"id":3,"first_name":"Jeremy","last_name":"Scott","email":"jscott2@cbsnews.com",
"country":"Colombia","ip_address":"103.52.74.225"}] };
   },



  render:function(){

    return(

 <Table
      height={this.state.rows.length * 300}
      width={1150}
      rowsCount={this.state.rows.length}
      rowHeight={30}
      headerHeight={30}
      rowGetter={function(rowIndex) {return this.state.rows[rowIndex]; }}>

      <Column dataKey="id" width={50} label="Id" />
      <Column dataKey="first_name" width={200} label="First Name" />
      <Column  dataKey="last_name" width={200} label="Last Name" />


    </Table>
      );
  }
});

ReactDOM.render(<MyCompi/>
   ,
    document.getElementById('root')
);

But I get error.

  • Uncaught TypeError: Cannot read property 'rows' of undefined

When I set the getInitialState (rows) like that "rows[]" the exception goes away.But I get empty datatable in that case.

I really confuesed about that.Any help?

javauser35
  • 1,177
  • 2
  • 14
  • 34

1 Answers1

1

Inside your rowGetter function, this does not refer to the component. You can use an arrow function instead:

rowGetter={rowIndex => this.state.rows[rowIndex]}

Learn more about this and this issue: How to access the correct `this` context inside a callback?

Community
  • 1
  • 1
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • 1
    or use `.bind` - `function(rowIndex) { return this.state.rows[rowIndex]; }.bind(this)`. P.S. Because as I see in the code there are no any ES2015 features – Oleksandr T. Jan 08 '16 at 21:46
  • @Alexander: *"Because as I see in the code there are no any ES2015 features"* True, but because the OP is using JSX, the OP is likely using Babel to transform it to JavaScript :) – Felix Kling Jan 08 '16 at 22:15