react-infinite doesn't re-render the list, if a item is deleted from the list. The view gets updated when i scroll back and forth

[ajit100]

How do I force react-infinite to rerender my list, When i deleted one item from the list.

For example :

import React, { Component } from 'react' import InfiniteList from 'react-infinite'; export default class componentName extends Component { constructor(){ this.state{ list:[] } }

fillList(){ list.push(1);list.push(2).... }

DeleteItem(){ let x = this.state.list.slice(); x.splice(0,1); this.setState({list,x});

// so now due to somereason i deleted 1 item , How do now the InfiniteList rerender the list again. // current behaviour is it doesn't delete that item immediately, But when i scroll back and forth i see //the new list //Question is how to force inifinite list to re-render it immediately. } renderlist(){ return this.state.list.map((item)=>

{item}

); } render() { return (

{this.renderList()} . // when list gets updated, changes are not reflected immediately

)

} }

[ajit100]

Ok, Sorry guys for asking this silly question. I found the issue and fixed it myself. There was absolutely no issue with this great library. So anyone facing this issue read Below how I fixed this.

First read this https://reactjs.org/docs/lists-and-keys.html and . This https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

So, i had this list and i was assigning key to each item but key was the index of the element. Now if i remove any element from the list or insert one , react gets confused as which items are new and should be rendered, so react misbehave and doesn't update the view or may be render one view as another. Fixed it by using ShortID as the key (https://github.com/dylang/shortid)

Thanks everyone