How to scroll to index in infinite list with react-virtualized

Question

I have an infinite list (using components InfiniteLoader and List from the awesome react-virtualized library). I want to scroll to a specific row to respond to a user generated event.

This is my code :

class Weeks extends Component {
  constructor(props) {
    super(props)
    this.state = {
      week_count: 10,
    }
    auto_bind(this)
  }

  is_week_loaded(week) {
    return week < this.state.week_count
  }

  load_more_weeks() {
    this.setState({week_count: this.state.week_count + 1})
  }

  scroll_to_week(week) {
    if (this.state.week_count <= week) {
      this.setState({week_count: week + 1})
    }
    this.list.scrollToRow(week)
  }

  render_week({key, index, style}) {
    return (
      <div key={key} style={style}>
        <Week week={index}/>
      </div>
    )
  }

  render() {
    return (
      <AutoSizer>
        {({height, width}) => (
          <InfiniteLoader
            isRowLoaded={this.is_week_loaded}
            loadMoreRows={this.load_more_weeks}
            rowCount={this.state.week_count + 1}
            >
            {({onRowsRendered, registerChild}) => (
              <List
                height={height}
                width={width}
                onRowsRendered={onRowsRendered}
                ref={(list) => {
                  this.list = list
                  registerChild(list)
                }}
                rowCount={this.state.week_count}
                rowHeight={row_height}
                rowRenderer={this.render_week}
                />
            )}
          </InfiniteLoader>
        )}
      </AutoSizer>
    )
  }
}

However, I get the following error :

Uncaught TypeError: this.list.scrollToRow is not a function

when I call the scroll_to_week method.

I thought from the documentation https://github.com/bvaughn/react-virtualized/blob/master/docs/reverseList.md that it was the correct way to scroll to a row index.

Thanks for your help.

Answer 1

scrollToRow is a prop, not a function. =)

Try this:

class Weeks extends Component {
  constructor(props) {
    super(props)
    this.state = {
      week_count: 10,
    }
    auto_bind(this)
  }

  is_week_loaded(week) {
    return week < this.state.week_count
  }

  load_more_weeks() {
    this.setState({week_count: this.state.week_count + 1})
  }

  scroll_to_week(week) {
    if (this.state.week_count <= week) {
      this.setState({
        scroll_to_week: week,
        week_count: week + 1
      })
    }
  }

  render_week({key, index, style}) {
    return (
      <div key={key} style={style}>
        <Week week={index}/>
      </div>
    )
  }

  render() {
    return (
      <AutoSizer>
        {({height, width}) => (
          <InfiniteLoader
            isRowLoaded={this.is_week_loaded}
            loadMoreRows={this.load_more_weeks}
            rowCount={this.state.week_count + 1}
            >
            {({onRowsRendered, registerChild}) => (
              <List
                height={height}
                width={width}
                onRowsRendered={onRowsRendered}
                ref={(list) => {
                  registerChild(list)
                }}
                rowCount={this.state.week_count}
                rowHeight={row_height}
                rowRenderer={this.render_week}
                scrollToRow={this.state.scroll_to_week}
                />
            )}
          </InfiniteLoader>
        )}
      </AutoSizer>
    )
  }
}