React-table: [IE11] SCRIPT438: Object doesn't support property or method 'find'

[Rellek]

Problem Description

react-tables running properly on all browsers sans Internet Explorer v11. I am thinking this is either being cause by improper implementation of react-table on my part since I have not seen it mentioned. Perhaps a typing issue? Site runs fine when react-table Tables are removed.

System Information

• Browser & Browser Version: Internet Explorer 11
• Node Version: v6.10.3
• OS Version: Windows 7
• NPM Version: 3.10.10

Data.js

import GoogleChart from "./Chart";
import Table from "./Table";
import TerritoryData from '../stores/TerritoryData';

export default class Data extends React.Component {

    /*
        How data is formatted when it hits this component:

        data = category
        data[i] = attribute

    */

    constructor() {
        super();


        this.state = {
            chartData: [],
            tableData: [],
            chartID: '',
            currentSection: '',
            currentTerritory: '',
            currentTerritoryName: '',
            chartYear: [],
        }
    }

    componentWillMount() {

      var formattedTableData = [];
      var columnCount = 0;

      for(var i = 0; i < this.props.tableData.length; i++){
          if (i == 0) {
            if (this.props.tableData[i][2] == undefined) { //empty 3rd column
              columnCount == 2
            } else {
              columnCount == 3
            }
          }

          if (columnCount == 2) {
            formattedTableData.push([TerritoryData.formatTableDataLabel(this.props.tableData[i][0]), this.props.tableData[i][1]]);
          }
          else {
            formattedTableData.push([TerritoryData.formatTableDataLabel(this.props.tableData[i][0]), this.props.tableData[i][1], this.props.tableData[i][2]]);
          }
      }


      this.setState({
          chartData: this.props.chartData,
          tableData: formattedTableData,
          chartID: this.props.chartID,
          currentSection: this.props.currentSection,
          currentTerritory: this.props.currentTerritory,
          currentTerritoryName: this.props.currentTerritoryName,
          chartYear: this.props.chartYear,
      });
    }

    componentWillReceiveProps(nextProps){

      var formattedTableData = [];

      for(var i = 0; i < nextProps.tableData.length; i++){

        if (nextProps.tableData[i][2] == undefined) {
          formattedTableData.push([TerritoryData.formatTableDataLabel(nextProps.tableData[i][0]), nextProps.tableData[i][1]]);
        }
        else {
          formattedTableData.push([TerritoryData.formatTableDataLabel(nextProps.tableData[i][0]), nextProps.tableData[i][1], nextProps.tableData[i][2]]);
        }

      }

        //if we get new data (i.e. the Data component is not UNmounting), we need to change the HTML ID of the data component so we can scroll to it.
        this.setState({
          chartData: nextProps.chartData,
          tableData: formattedTableData,

          chartID: nextProps.chartID,
          currentSection: nextProps.currentSection,
          currentTerritory: nextProps.currentTerritory,
          currentTerritoryName: nextProps.currentTerritoryName,
          chartYear: nextProps.chartYear,
        });
    }

    render() {

        var fullChartTitle = this.state.currentTerritoryName + " in " + this.state.chartYear + ", by " + this.state.chartData[0][0];

        return (

            <div className="data col-sm-6">
              <div id="chart-title-full">{fullChartTitle}</div>
              <div id={this.state.chartID}>
                <GoogleChart data={this.state.chartData} title={this.state.chartData[0][0]}/>
                <Table data={this.state.tableData} />
              </div>
            </div>
        );
    }
}

Table.js
````
import * as Actions from "../actions/Actions";
import React from 'react';
import ReactTable from 'react-table';
import TerritoryData from '../stores/TerritoryData';

export default class Table extends React.Component {

constructor() {
super();

this.state = {
  chartType: 'Table',
  className: '',
  formattedData: {}
}

}

componentWillMount(props) {

Actions.checkTables()
  ? this.setState({className: 'table-container collapse in'})
  : this.setState({className: 'table-container collapse'});

}

render() {

var columns = [];
var tableData = this.props.data;

if (this.props.data[0][2] == undefined) {
  columns = [
    {
      id: this.props.data[0][0],
      header: this.props.data[0][0],
      accessor: '0'
    }, {
      id: this.props.data[0][1],
      header: this.props.data[0][1],
      accessor: '1'
    }
  ]
} else {
  columns = [
    {
      id: this.props.data[0][0],
      header: this.props.data[0][0],
      accessor: '0'
    }, {
      id: this.props.data[0][1],
      header: this.props.data[0][1],
      accessor: '1'
    }, {
      id: this.props.data[0][2],
      header: this.props.data[0][2],
      accessor: '2'
    }
  ]
}

tableData.splice(0, 1);

var tableID = 'react-table-div';

return (
  <ReactTable 
    id={tableID}
    data={tableData}
    columns={columns}
    className={this.state.className}
    showPagination={false}
    sortable={true}
    resizable={false}
    minRows={11}
  />
);

}
}

```

EDIT: Will add code momentarily

[Rellek]

Installed babel-polyfill to the project and it worked like a charm. Apparently this is a React.js / IE issue in that IE doesn't support .find() and other JS functions.

[CibiAananth]

@Rellek Can you explain how did you resolve the issue? I'm facing the similar issue here. I'm using create-react-app.

[neerender]

I Have the same issue..
Environment: SPFX, IE11, React- Table.
its working fine in Chrome, Edge

Can you please let me know how did you resolved the issue?

[CibiAananth]

@neerender import babel-polyfill as the first line in root file (index.js file)