Client-side display items starting from...

[gshilin]

I need to make the first visible item to have some predefined index. This is my code and it doesn't work, the first visible item always has index of zero

import React from 'react';

import VirtualList from 'react-virtual-list';

const List = ({ virtual, itemHeight }) => (
  <ul style={virtual.style}>
    {virtual.items.map(item => (
      <li key={`item_${parseInt(item, 10)}`} style={{ height: itemHeight }}>
        {item}
      </li>
    ))}
  </ul>
);

class Slides extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      slides: [
        '00', '01', '02', '03', '04', '05', '06', '07', '08', '09',
        '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',
        '20', '21', '22', '23', '24', '25', '26', '27', '28', '29',
      ],
    };

    const options = {
      initialState: {
        firstItemIndex: 10,
        lastItemIndex : 20
      }
    };

    this.ListSlides = VirtualList(options)(List);
  }

  render() {
    const ListKtuviot = this.ListSlides;

    return (
      <ListKtuviot items={this.state.slides} itemHeight={50} />
    );
  }
}

Slides.propTypes = {};

export default Slides;

[developerdizzle]

Hey @gshilin, unfortunately the initialState properties will be unused once the component mounts into the DOM, and first/lastItemIndex will be recalculated based on the scroll position. This hasn't been tested, but I would recommend adding code to scroll down the appropriate number of pixels in order to reach the desired first item. If you simply want to hide the first 10 items, you can remove them from your state.slides array. Hope that helps!