React-table: getTrProps => Cannot read property 'original' of undefined

[parisaabasian]

I am usin ReactTable in my poject and I want selective table,I just copied the example code but with real data,and I get this Error in this line :
const selected = this.isSelected(r.original._id);
this is my error :
TypeError: Cannot read property 'original' of undefined

Can you help me?

[smoleniuch]

Can you provide full example on codesanxbox?

Anyway getTrProps method accepts two arguments, the second one is row.I bet you did not parse arguments correct.

Instead (row) => this.isSelected(row.original._id) use ( tProps, row) => this.isSelected(row.original._id)

This kind of issues belongs to here.You will get the same solution but with shorter amount of time.

Cheers!

[EbokianKnight]

Your "here" link appears to be down.

Additionally, on the first render, if there are no rows at all (say you're fetching the rows from the server in a componentDidMount), the rowInfo can come back as null. That results in this error. I haven't spent a whole lot of time checking it out, but adding if (!r) return {}; allows the component to load up.

[smoleniuch]

@EbokianKnight You are right, i did corrent the link.Does react tools use slack chat or they work with spectrum?I am not familiar with them anyway but i get some help in the slack chat.

Also i have checked select table with empty data and you are right again.

@parisaabasian You should check if the row is not null before using it as Ebokian mentioned.

Cheers!

[parisaabasian]

@smoleniuch you are right,thanks for your time :+1:

[PatNeedham]

This occurs any time the current page size is larger than the total number of rows being rendered. Changing

getTrProps = (s, r) => {
  const selected = this.isSelected(r.original._id)
  return {
    style: {
      backgroundColor: selected ? "lightgreen" : "inherit"
    }
  }
}

to

getTrProps = (s, r) => {
  const selected = r ? this.isSelected(r.original._id) : false // because r might not exist
  return {
    style: {
      backgroundColor: selected ? "lightgreen" : "inherit"
    }
  }
}

Fixed it for me

[tannerlinsley]

This feature/issue has been tagged as one that will likely be fixed or improved in the next major release of React-Table. This release is expected to be completed in the next 6 - 8 months. Please see #1143 for more detail. If you believe this feature can be easily fixed, we invite you to fork the project, attempt the fix, and use it until the latest version is available. If the fix is simple enough, we will also consider it as a PR to the current version.

[Etregoning]

This occurs any time the current page size is larger than the total number of rows being rendered. Changing

getTrProps = (s, r) => {
  const selected = this.isSelected(r.original._id)
  return {
    style: {
      backgroundColor: selected ? "lightgreen" : "inherit"
    }
  }
}

to

getTrProps = (s, r) => {
  const selected = r ? this.isSelected(r.original._id) : false // because r might not exist
  return {
    style: {
      backgroundColor: selected ? "lightgreen" : "inherit"
    }
  }
}

Fixed it for me

Does this still work for you? When I try this solution, it doesn't error anymore, but when I use select all, it just highlights the rows and doesn't check the box -- and when I try to log selection, everything comes back as undefined.

[trevorlujan123]

@Etregoning were you able to get this fixed? I'm finding myself at the same place

[esetnik]

I just ran into the same issue after enabling paging. This seems like it should still be open.