react-infinite-scroller icon indicating copy to clipboard operation
react-infinite-scroller copied to clipboard

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

Open igorify opened this issue 7 years ago • 9 comments

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.

igorify avatar Sep 20 '17 14:09 igorify

+1

computist avatar Nov 04 '17 05:11 computist

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>

danbovey avatar Nov 04 '17 11:11 danbovey

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>
  }
}

darenyong avatar Jan 04 '18 18:01 darenyong

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

Hi.Is There no final solution?

alun-430 avatar Apr 26 '19 07:04 alun-430

Is this lib abandoned?

hugonasciutti avatar Jul 01 '19 13:07 hugonasciutti

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 ?

apoutchika avatar May 23 '20 05:05 apoutchika

Any solution to start at bottom?

roxdavirox avatar Jul 02 '20 16:07 roxdavirox

For those who are looking for a solution. I created an PR here https://github.com/danbovey/react-infinite-scroller/pull/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"

meikidd avatar Jan 05 '21 09:01 meikidd