Convert ReactClass to ReactComponent ES6

Question

I m using the Facebook fixed data table from : https://github.com/facebook/fixed-data-table

So I'm trying to convert a ReactCreateClass component to a React Component using ES6, here is the React Class :

<link rel="stylesheet" type="text/css" href="dist/fixed-data-table.css" />
<script src="dist/fixed-data-table.js"></script>
<script type="text/jsx">

var Column = FixedDataTable.Column;
var Table = FixedDataTable.Table;
var Cell = FixedDataTable.Cell;


var FilterExample = React.createClass({
  render() {
    return (
      <Table
    rowHeight={50}
    rowsCount={1}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />
    <Column
      header={<Cell>Col 2</Cell>}
      cell={<Cell>Column 2 static content</Cell>}
      width={2000}
    />
  </Table>
    );
  },
});

ReactDOM.render(
  <FilterExample />,
  document.getElementById('react')
);

</script>

And here the result using React ES6 :

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';

var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3']
];

class DataTable extends React.Component{



  // Get initial state from stores
  constructor(props) {
    super(props);
    console.log("Datatable constructor");
    this.rowGetter = this.rowGetter.bind(this);
  }

  rowGetter(rowIndex) {
    return rows[rowIndex];
  }

  render() {
    return (
      <Table
        rowHeight={50}
        rowsCount={rows.length}
        rowGetter={this.rowGetter}
        width={100}
        height={250}
        headerHeight={50}>
        <Column
          label="Col 1"
          width={300}
          dataKey={0}
          />
        <Column
          label="Col 2  "
          width={40}
          dataKey={1}
          />
        <Column
          label="Col 3"
          width={30}
          dataKey={2}
          />

      </Table>
    );
  }
}

export default DataTable;

It's working fine but I don't understand why I need to add rowGetter method and attribute in the React ES6 component with the bind method. If I need to convert other React Component from facebook or other to ES6 It will be very long and messy. Why I can't just copy and paste the render method from the ReactClass to the React Component in ES6 ?

What is your question? That you need to bind callbacks to `this` (like for all events calls from another context in JS), or that you need to have a rowGetter prop for some reason that isn't explained and not in the first example? reactClass was doing binding for you behind the scenes with the proprietary createClass — Dominic, Nov 13 '15 at 14:13
Ok, If I will try to explain it better : If I remove rowGetter and rows element in the ES6 part it's not working, and I don't understand why I need to add these stuff because in the React Class I did not use rowGetter and rows and it works — fandro, Nov 13 '15 at 14:20
So the question is only about why the method needed to be added, not why you have to use `.bind`? — Felix Kling, Nov 13 '15 at 14:41
Yes Exactly ! do you know Why we need to add theses methods to achieve the same fonctionality ? — fandro, Nov 13 '15 at 14:58
I don't understand how you would have got the table working in your ES5 version - you need that rowGetter function. How is it getting populated with data? — Tom, Nov 13 '15 at 16:28

score 0 · Answer 1 · answered Nov 13 '15 at 16:30

0

The rowGetter function is required.

https://facebook.github.io/fixed-data-table/api-table.html

It must have been a mistake in your original ES5 code, as that function is a required prop for the FixedDataTable for it to populate the table with data.

answered Nov 13 '15 at 16:30

Tom

2,321
2
18
29

Hello thanks for the answer, I also see that the rowGetter is required but in the ES5 code when i use the code it works with the jsx transpiler imported and react 0.14 . Is this maybe because the ES5 dosen't read throw error for required props or something else ? – fandro Nov 13 '15 at 17:05
You should have been getting a warning in your console about not passing an argument to a required prop. The es version shoulder really come into it. Either way, you wouldn't have been getting any data in your table in the es5 version. – Tom Nov 13 '15 at 23:42

Convert ReactClass to ReactComponent ES6

1 Answers1