loadmore does not triggers using react-infinite-scroller

Question

I am using this library react-infinite-scroller for loading more items each time you scroll down but for some reason the loadmore is not triggering for me.

The code looks as below:

import React from 'react';
import {Route, Link} from 'react-router-dom';
import FourthView from '../fourthview/fourthview.component';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import traineeship from './traineeship.api';
import Header from '../header/header.component';
import InfiniteScroll from 'react-infinite-scroller';

require('./traineeship.style.scss');

class Traineeship extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            companies: [],
            page: 0,
            resetResult: false,
        };
    }

    componentDidMount() {
        this.fetchCompanies(this.state.page);
    }

    fetchCompanies(page){
        traineeship.getAll(page).then(response => {
            if (response.data) {
                const companies = Array.from(this.state.companies);
                this.setState({ companies: companies.concat(response.data._embedded.companies) });
                // this.setState({companies: this.state.companies.concat(response.data._embedded.companies)});
            } else {
                console.log(response);
            }
        });
    }

    render() {
        return (
            <div className={"wrapperDiv"}>
                {JSON.stringify(this.props.rootState)}
                <div className={"flexDivCol"}>
                    <div id="header">
                        <Header/>
                    </div>
                    <div id="result">
                        <div className={"search"}>
                            <h2>Harjoittelupaikkoja</h2>
                            <p className={"secondaryColor"}>{this.state.companies.length} paikkaa löydetty</p>
                        </div>
                        <div className={"filters"}>
                            <h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
                                Hakukriteerit</h5>
                            <div className={"filter"}>Ravintola- ja cateringala</div>
                            <div className={"filter"}>Tarjoilija</div>
                            <div className={"filter"}>Kaikki</div>
                        </div>
                        <div className={"searchResults"}>
                            <h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
                                Hakutulokset</h5>

                            <InfiniteScroll
                                pageStart={0}
                                loadMore={() => this.fetchCompanies}
                                hasMore={true || false}
                                loader={<div className="loader" key={0}>Loading ...</div>}
                                useWindow={false}
                            >
                                {
                                    this.state.companies.map((traineeship, key) => (
                                        <div id={"item"} key={key}>
                                            <div className={"companyInfo"}>
                                                <div className={"heading"}>
                                                    <div id={"companyDiv"}>
                                                        <p style={{
                                                            fontSize: '18px',
                                                            lineHeight: '18px'
                                                        }}>{traineeship.name}</p>
                                                    </div>
                                                    {
                                                        traineeship.video == null
                                                            ? ''
                                                            :
                                                            <div id={"videoDiv"}>
                                                                <div className={"youtubeBox center"}>
                                                                    <div id={"youtubeIcon"}>
                                                                        <a className={"primaryColor"}
                                                                           href={traineeship.mediaUrl}>
                                                                        <span style={{marginRight: '3px'}}><Image
                                                                            src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png"
                                                                            style={{
                                                                                width: '24px',
                                                                                height: '17px'
                                                                            }}/></span>
                                                                            <span> <p style={{
                                                                                fontSize: '13px',
                                                                                lineHeight: '18px',
                                                                                margin: 0,
                                                                                display: 'inline-block'
                                                                            }}>Esittely</p></span>
                                                                        </a>
                                                                    </div>
                                                                    <div id={"txtVideo"}>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                    }

                                                </div>
                                                <div className={"location"}>
                                                    <div id={"locationIcon"}>
                                                        <Image src="assets/img/icLocation.png" style={{marginTop: '-7px'}}/>
                                                    </div>
                                                    <div id={"address"}>
                                                        <a href={"https://www.google.com/maps/search/?api=1&query=" + encodeURI("Fredrikinkatu 4, Helsinki")}>
                                                            <p className={"primaryColor"}
                                                               style={{fontSize: '13px'}}>{traineeship.city}(show in
                                                                map)</p>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div className={"companyDescription"}>
                                                    <p className={"secondaryColor"} style={{
                                                        fontSize: '14px',
                                                        lineHeight: '20px'
                                                    }}>{traineeship.description}</p>
                                                </div>

                                                <div className={"companyContacts"} style={{marginTop: '20px'}}>
                                                    <p className={"contactInfo"}>URL: {traineeship.website}</p>
                                                    <p className={"contactInfo"}>Email: {traineeship.email}</p>
                                                    <p className={"contactInfo"}>Puh: {traineeship.phonenumber}</p>
                                                    <p className={"contactInfo"}>Contact: {traineeship.contact}</p>
                                                </div>
                                            </div>
                                        </div>
                                    ))
                                }
                            </InfiniteScroll>


                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Traineeship;

If I bind fetchCompanies within the instructor then it keeps calling the function infinitely eventhou the page keeps increasing for each call, which is fine but the problem is it keeps calling infinite without even scrolling!

Any idea how can I fix this?

Answer 1

Please change your code with this:

 <InfiniteScroll pageStart={0}
                 loadMore={this.fetchCompanies}
                  hasMore={true || false}
                  loader={<div className="loader" key={0}>Loading ...</div>}
                  useWindow={false}>

Answer 2

To anyone that is facing the same issue.

That was happening because you probably were checking out the example given here and as so, probably forgot to change the hasMore prop from {true || false} to an expression that resolves to true or false.

Due to this, the expression {true || false} will always resolve to true, therefore the InfiniteScroll component will always keep trying to fetch data even though there is no more data to be fetched.

What you needed to do were to create a function (or use an arrow function) to check if there are more companies to be fetched and return a boolean accordingly.