Waypoint doesn't trigger on list made with .map

[developdeez]

A fellow dev and I have tried for hours now.

There seems to be no way to get Waypoint to work in components that create lists. We also tried putting the waypoint on the main page but it seems to think it's inside even after the list populates. I am now trying to force it with position absolute and same.

Here's the component for reference:

const EventsList: React.FC<IEventsList> = ({ events, handleEnd, lang, distanceMetric, loading, t, ad }) => {
  return (
    <div className='events-card-content'>
      <div className='container'>
        <div className='col-md-12'>
          <div className='row'>
            <div className='col-md-12'>
              <span className='head'>Events</span>
            </div>
            {events.map(event => (
              <EventCard upcomingEvents key={Math.random()} event={event} t={t} distanceMetric={distanceMetric} lang={lang} />
            ))}
            <ScrollUpButton />
          </div>
          <div style={{ padding: '0px', position: 'absolute', bottom: '30%' }}>
            <Waypoint onEnter={({ previousPosition, currentPosition }) => handleEnd({ previousPosition, currentPosition })} />
          </div>
          <div className='col-md-12'>
            {ad}
            <br />
            <div className='more-content-btn'>{loading ? <span>{t('Loading')}</span> : <span>{t('noevent')}</span>}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

Im using 10.1.0 is this a known issue or am I doing something wrong.

[developdeez]

bump

[trotzig]

It's hard to know what's going on without also knowing the css styles for the elements. The most likely thing is that the waypoint is consistently "visible" in the scrollable parent container. If you inspect the DOM and look for the react-waypoint div, where is it located?