1<div
2  id="scrollableDiv"
3  style={{
4    height: 300,
5    overflow: 'auto',
6    display: 'flex',
7    flexDirection: 'column-reverse',
8  }}
9>
10  {/*Put the scroll bar always on the bottom*/}
11  <InfiniteScroll
12    dataLength={this.state.items.length}
13    next={this.fetchMoreData}
14    style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
15    inverse={true} //
16    hasMore={true}
17    loader={<h4>Loading...</h4>}
18    scrollableTarget="scrollableDiv"
19  >
20    {this.state.items.map((_, index) => (
21      <div style={style} key={index}>
22        div - #{index}
23      </div>
24    ))}
25  </InfiniteScroll>
26</div>