ref is not a prop. Trying to access it will result in undefined being returned.

[igorify]

Warning: InfiniteScroll: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

It would be great to change the name of 'ref' prop to something other, because it is reserved in React for special props.

[computist]

+1

[danbovey]

A code example would be nice. I don't see the need for accessing the ref prop on any component. You should be passing function refs instead of strings, yeah? Then there's no need to call on InfiniteScroller.props.ref.

<InfiniteScroll ref={c => this._scroll = c}>
    {items}
</InfiniteScroll>

[darenyong]

Hello,

I was able to reproduce the react warning using the example below. Not sure why that warning is triggered.

The ref is using a callback function (same as your example above).

Note that I need the ref for a "more ..." button on the screen.

The more button can be clicked to load more rows if required. This is usually only needed for vertically tall displays when the number of rows loaded does not reach to the bottom of the screen (therefore the scroll event cannot be triggered, despite there still being more rows to display).

export default class AssetTable extends Component {
  onHasMoreClick() {
    this.scroller.scrollListener();
  }

  render() {
    return (
      <div>
        <Segment attached="bottom" className="assets-table-segment" {...assetTable}>
          <Table fixed className="ui sortable celled table">
            <InfiniteScroll ref={c => this.scroller = c} element={'tbody'}
                            loadMore={loadMore} hasMore={hasMore} initialLoad={false}>
              {assets.map(asset => ([
                <Table.Row key={asset.PackageId} id="asset-row">
                ... cell stuff in here
                </Table.Row>,
              ]))}
            </InfiniteScroll>
          </Table>
          {hasMore ?
            <HasMoreIndicator loading={isInfiniteScrollLoading}
                              onClick={this.onHasMoreClick}
            /> : null
          }
        </Segment>
      </div>
  }
}

[umbrellait-maksim-baevskiy]

Hi. Any updates here? The issue is still being reproduced...

[alun-430]

Hi.Is There no final solution？

[hugonasciutti]

Is this lib abandoned?

[apoutchika]

Hello,

I try to delete all ref props, it work fine, without error in my project, but the test 'should attach scroll listeners' fail in the plugin...

Has anyone found a solution ?

[roxdavirox]

Any solution to start at bottom?

[meikidd]

For those who are looking for a solution. I created an PR here #268, hopefully this repo maintainer can merge it and publish a new version.

Before it merged, you guys can temporarily use this package alternatively "@meikidd/react-infinite-scroller"