caseywebdev / react-list

:scroll: A versatile infinite scroll React component.
https://caseywebdev.github.io/react-list
MIT License
1.96k stars 176 forks source link

Is there a way to reinitialise the list? #206

Closed anasanzari closed 3 years ago

anasanzari commented 6 years ago

Is there a way to reinitialise react-list component, to render just the initial number of items?

ndford2015 commented 6 years ago

Could you share some code with what you're looking to do?

If you're asking what I think you're asking, you could set an item in your component state with your list of items:

state = {
    items: [],
    origItems: []
  }

When your component mounts, load the items:

componentDidMount() {
   //define function to get your list of items
   let items = this.getItems();
   this.setState({items, origItems: items});
  }

In your render function, set the length to length of items in state, and define some trigger to reinitialize the list (e.g a button click or scroll listener):

render() {
    return (
      <div>
        <ReactList
          itemRenderer ={this.renderItem.bind(this)}
          length={this.state.items.length}
          type='uniform'
          />
       <button onclick={() => this.resetItems()}>Reset Items</button>
      </div>
    )
  }
}

resetItems = () => {
    this.setState({items: this.state.origItems});
}