React js : items never fed in infinite scroll (now with simpler example)

Question

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.

Answer 1

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>
  );
}

Answer 2

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} />});