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 #253

ajit100 · 2018-01-07T07:51:20Z

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 · 2018-01-11T18:24:55Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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 #253

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 #253

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 #253

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 #253

Comments