const items = props.items; const renderItem = props.renderItem; const perPage = props.perPage || 10; State.init({ items, widgets: [], }); if (JSON.stringify(state.items) !== JSON.stringify(items)) { State.update({ widgets: [], items, }); } // if (state.items.length != items.length) { // if (items.length > state.items.length) { // const newItems = items // .slice(0, items.length - state.items.length) // .map(renderItem); // const widgets = [...newItems, ...state.widgets]; // State.update({ // widgets, // items, // }); // } else { // State.update({ // widgets: [], // items, // }); // } // } const makeMoreItems = () => { const newItems = items .slice(state.widgets.length, state.widgets.length + perPage) .map(renderItem); state.widgets.push(...newItems); State.update(); }; return ( <InfiniteScroll pageStart={0} loadMore={makeMoreItems} hasMore={state.widgets.length < items.length} loader={<div className="loader">Loading ...</div>} > {state.widgets} </InfiniteScroll> );