0

Getting unexpected while running. I am trying to load the InfiniteLoader of react virtualized. Would like to know how to call the API through this component If any example is available. I have taken the component from https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md I am using the example from https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader

import React from 'react';
import ReactDOM from 'react-dom';
import { InfiniteLoader, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

export default class MyList extends React.PureComponent {

  const remoteRowCount

  const list = [];

  function isRowLoaded ({ index }) {
    return !!list[index];
  }

  function loadMoreRows ({ startIndex, stopIndex }) {
  }

  function rowRenderer ({ key, index, style}) {
    return (
      <div
        key={key}
        style={style}
      >
        {list[index]}
      </div>
    )
  }

  //Render the list from this function
  render() {
    return(
      <InfiniteLoader
    isRowLoaded={isRowLoaded}
    loadMoreRows={loadMoreRows}
    rowCount={remoteRowCount}
  >
    {({ onRowsRendered, registerChild }) => (
      <List
        height={200}
        onRowsRendered={onRowsRendered}
        ref={registerChild}
        rowCount={remoteRowCount}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={300}
      />
    )}
  </InfiniteLoader>
    );
  }

}

Getting the below given exception

Module build failed: SyntaxError: D:/code/react-starter/src/Components/MyList/MyList.js: Unexpected token (8:8)

   6 | export default class MyList extends React.PureComponent {
   7 |
>  8 |   const remoteRowCount
     |         ^
   9 |
  10 |   const list = [];
  11 |
Chetan
  • 1,141
  • 2
  • 15
  • 36
  • 1
    It's because you declared `remoteRowCount` and `list` inside your component. Put them above the class definition (or if you want them to be part of the component, add them properly in the constructor) – Jayce444 May 06 '18 at 12:33
  • I would like to know these kind of rules , where would I find them ? – Chetan May 06 '18 at 12:35
  • Just have a look at the React documentation, it shows you how to set up a component. For the sake of adding properties to your component in the constructor (as either object properties of the actual component, or as state values) check out the lifecycle and constructor stuff: https://reactjs.org/docs/state-and-lifecycle.html – Jayce444 May 06 '18 at 12:40
  • Thanks , but for this moment , what would be solution to see this component working – Chetan May 06 '18 at 12:45
  • Like I said in my first comment, move them out of your class definition – Jayce444 May 06 '18 at 12:51
  • I tried that still it gives exception – Chetan May 06 '18 at 13:07

1 Answers1

2

you can try the follow code.

Basically, I：

  1. moved list and remoteRowCount to MyList's state.

  2. change isRowLoaded loadMoreRows rowRenderer to MyList's instance method. You may also want to do the same thing to onRowsRendered and etc.

    import React from 'react';
import ReactDOM from 'react-dom';
import { InfiniteLoader, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

export default class MyList extends React.PureComponent {
  constructor() {
    super();

    this.state = {
      remoteRowCount: 0,
      list: [],
    };

    this.isRowLoaded = this.isRowLoaded.bind(this);
    this.loadMoreRows = this.loadMoreRows.bind(this);
    this.rowRenderer = this.rowRenderer.bind(this);
  }

  isRowLoaded ({ index }) {
    return !!this.state.list[index];
  }

  loadMoreRows ({ startIndex, stopIndex }) {
  }

  rowRenderer ({ key, index, style}) {
    return (
      <div
        key={key}
        style={style}
      >
        {this.state.list[index]}
      </div>
    )
  }

  //Render the list from this function
  render() {
    return(
      <InfiniteLoader
    isRowLoaded={this.isRowLoaded}
    loadMoreRows={this.loadMoreRows}
    rowCount={this.state.remoteRowCount}
  >
    {({ onRowsRendered, registerChild }) => (
      <List
        height={200}
        onRowsRendered={onRowsRendered}
        ref={registerChild}
        rowCount={remoteRowCount}
        rowHeight={20}
        rowRenderer={this.rowRenderer}
        width={300}
      />
    )}
  </InfiniteLoader>
    );
  }

}
loveky
  • 1,002
  • 1
  • 11
  • 18