I've got a small problem with "react-infinite-scroller". I'm using the code below :
function RadioStations(props) {
const [items, setItems] = useState(new Array());
const [hasMore, setHasMore] = useState(true);
let { filter, fname } = useParams();
return (
<div style={{ height: "700px", overflow: "auto" }}>
<InfiniteScroll
pageStart={0}
loadMore={() => {
items.push(<div>Test</div>);
console.log(items);
setItems(items);
setHasMore(false);
}}
hasMore={hasMore}
loader={
<div className="loader" key={0}>
Loading ...
</div>
}
useWindow={false}
>
{items}
</InfiniteScroll>
</div>
);
}
As I can see, my loadMore function is fired, but I never get my items to appear and I wondering why.
Any help would be welcome.
Thank you.
Edit:I've simplified the example.
If you using map , you need to return something
Try to add a return is this line :
let jsonItems = json.map((data) =>{ return <Station data={data} />});
Found it. I need to add a div inside the infinite scroll.
function RadioStations(props) {
const [items, setItems] = useState(new Array());
const [hasMore, setHasMore] = useState(true);
let { filter, fname } = useParams();
return (
<div style={{ height: "700px", overflow: "auto" }}>
<InfiniteScroll
pageStart={0}
loadMore={() => {
items.push(<div>Test</div>);
console.log(items);
setItems(items);
setHasMore(false);
}}
hasMore={hasMore}
loader={
<div className="loader" key={0}>
Loading ...
</div>
}
useWindow={false}
>
<div>
{items}
</div>
</InfiniteScroll>
</div>
);
}