onEnter never fires

Here is my code

  renderBlocks = () => {
    const {
      items
    } = this.props;

    if (items.length) {
      return <section>
        {(() => {
          return items.map((item, index) => {
            return <Block testimonial={ item } key={ index } />
          });
        })()}
      </section>
    } else {
      return <NoPost />
    }
  };

  renderWaypoint = () => {
    return <Waypoint
        onEnter={ this.loadBlocks }>
          <span>Loading..</span>
        </Waypoint>
  }

  loadBlocks = () => {
    console.log('loading more!');
  }

  render() {
    return (
      <section>

        <div>
          { this.renderBlocks() }
        </div>

        <div className='waypoint'>
          { this.renderWaypoint() }
        </div>

      </section>
    )
  }

However, the Waypoint only gets fired once and never again (even when scrolled upon). What could be the issue that is preventing the Waypoint from working?

[stanleycyang]

I switched modules to this with the same example and it worked. I don’t get why Waypoint wouldn’t do the same though.

@trotzig No I don’t have a public example of it. I can try and put one together though

[jamesplease]

@stanleycyang , no need to apologize. That’s pretty interesting, but a real pain! Thanks for taking the time to follow up here. I hope you’re able to get things working as expected.