Nrthugu

I am trying to implement Infinite Scroll in React and I want the URL to change as soon as the one container ends and another one starts.
If I scroll up and view the previous container, URL should change back.

What I did: I have implemented the Infinite Scroll successfully. And am trying to find the position of the container depending on the height of the container and window.scrollY value on page.

I need to update the values in State for that reason and I have used window.onscroll inside render to check for conditions and update the state accordingly.

What is the problem: I am facing issues that I am not getting desired results and I know that I should not be using setState inside render(). But where else can I update the state, if that has to be done depending upon the conditions in window.onscroll that is inside render().

Update

InfiniteScrollingComponent.js

state = {

    height: ,

    containerThatIsBeingRenderedArr: ,

    elementIndex: 0,

    upperBound: 0,

    lowerBound: null

};



componentDidUpdate = (prevProps, prevState) => {

    let urlArr = , height = , containerThatIsBeingRenderedArr = ;

    for (let index in this.props.items) {

      containerThatIsBeingRenderedArr[index] = document.getElementById(

        `${this.props.items[index].slug}`

      );

      height[index] = containerThatIsBeingRenderedArr[index].offsetHeight;

    }

    if (prevState.containerThatIsBeingRenderedArr.length === containerThatIsBeingRenderedArr.length) return;

    if (containerThatIsBeingRenderedArr.length && height.length) {

      this.setState(

        {

          height: height,

          containerThatIsBeingRenderedArr: containerThatIsBeingRenderedArr

        }

      );

    }

};

Then inside render() method, I have:

window.onscroll = () => {

    this.changeURL();

}

changeURL method looks like this:

changeURL = () => {

    const { elementIndex, height, upperBound, lowerBound } = this.state;

    let LB = lowerBound === null ? height[0] : lowerBound;

    if (window.scrollY > upperBound && window.scrollY < LB) {

       return;

    }

    if (window.scrollY > LB) {

      this.setState(prevState => {

        return {

          upperBound: prevState.lowerBound,

          lowerBound: LB + prevState.height[prevState.elementIndex + 1],

          elementIndex: prevState.elementIndex + 1

        };

      });

    }

    if (window.scrollY < upperBound) {

      this.setState(prevState => {

        return {

          lowerBound: prevState.upperBound,

          upperBound:

            prevState.upperBound - prevState.height[prevState.elementIndex - 1],

          elementIndex: prevState.elementIndex - 1

        };

      });

    }

};