I am currently working on a React class component that uses Post components. Within this component, there is a button that triggers the loading of more data from the database. The issue I am encountering is that when new data is fetched, the page automatically scrolls to the bottom. I would like to modify this behavior so that the user remains at their current position within the post feed.
Here is the code for my component:
import React,{Component} from 'react';
import Ride from '../Components/Ride';
import firebase from 'firebase'
class RideList extends Component{
state={
rides: [{
user:{
photo: '',
name: '',
uid: ''
},
likes: 0,
likers: [],
time: '',
line: [{lng:22.01,lat:41.01}],
when: 0
}],
lastDoc: {}
}
componentDidMount(){
const db = firebase.firestore();
db.collection('posts').orderBy('when','desc').limit(5).get().then(res=>{
const data = []
res.docs.map(doc=>{
data.push({...doc.data(),id: doc.id})
})
this.setState({rides: data, lastDoc: res.docs[res.docs.length-1]})
}).catch(er=>{
console.log(er)
})
}
loadMore = ()=>{
const rides = [...this.state.rides];
const db = firebase.firestore();
db.collection('posts').orderBy('when','desc').startAfter(this.state.lastDoc).limit(5).get().then(res=>{
res.docs.map(doc=>{
rides.push({...doc.data(),id: doc.id})
})
this.setState({rides: rides, lastDoc: res.docs[res.docs.length-1]})
})
}
render(){
return(
<div style={{textAlign:'start'}}>
{this.state.rides.map((el,index)=>{
return(
<div>
<Ride key={el.when} {...el} user={this.props.user}/>
</div>
)
})}
{this.props.uid ? '':<button onClick={()=>this.loadMore()}>Load more</button>}
</div>
)
}
}
export default RideList;