Unexpected token with react

Question

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 |

Answer 1

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