Error accessing filtered data in React Table

Question

I am trying to use the above code, but I am getting an error during the build process saying this.selectTable is null.

Can anybody help me out with this? I have followed this logic - Access filtered data in ReactTable

  <ReactTableComponent
    ref={this.reactTable}
    className="polls-table"
    defaultPageSize={10}
    getTrProps={(_, rowInfo = {}) => {
      let { index = 0 } = rowInfo;
      return {
        style: {
          background: index % 2 ? "#fafafa" : "#FFFFFF"
        }
      };
    }}
    columns={columns}
    data={polls}
  />
  <Button
    color="primary"
    type="button"
    onClick={download(this.reactTable.current.getResolvedState())}
  >
    Download
    {/* <CSVLink data={myFunction(this.selectTable.getResolvedState())} filename="polls.csv">Export to CSV</CSVLink> */}
  </Button>
</Paper>;

I don't see where ```this.selectTable``` is defined in your code, but you defined ```this.reacTable``` with the ref. This may be it. — Emmanuel Meric de Bellefon, Dec 11 '19 at 15:17

score 1 · Accepted Answer · answered Dec 11 '19 at 15:37

A problem is within this line:

onClick={download(this.reactTable.current.getResolvedState())}

What happens now is the JS running your code right away to calculate the onClick handler. And just because the ref on the first run is null, the error occurs. What you should have instead is this:

onClick={() => {download(this.reactTable.current.getResolvedState())}}

You can also add condition to check wheter this.reactTable.current is not null

Error accessing filtered data in React Table

1 Answers1

Linked