Accepted answer

You can update your loadMoreResources function like that to remove all duplicates from the state.

loadMoreResources = () => {
        let {page,resources} = this.state;
        let newPage = page +1;
        this.setState({page: newPage})
        this.props.getResources(undefined,undefined,newPage).then((res) => {
            let ids = =>
            let stateWithoutDuplicates = resources.filter(({id}) => !ids.includes(id))
            if(res.meta && (res.meta.current_page < res.meta.last_page)){
            }else this.setState({hasMoreItems:false})
                resources: [...stateWithoutDuplicates,]


If you know where in the array it needs to be added you can just update state pretty similar to what you were doing when fetching data

  resources: [newItem,...this.state.resources]

If you are adding to the top and your server is returning the same item again you can try and use the same key prop for both items. If they both have the same key React won't render them twice

Related Query

More Query from same tag