Hey everyone, I am just starting with React and noticing some cross browser compatibility issues with my Camper Leader Board. In firefox my application works fine, but in Chrome, sorting the camper list is completely broken for both total and recent points.
In my application, I am just reordering the this.state.alltime and this.state.recent arrays of objects in order to accomplish sorting. Should I be doing this differently or is there a bigger issue with React and chrome here?
Here is one of the sorting functions:
sortRecent(event){
var sortRecent;
if(this.state.order === "decending"){
sortRecent = this.state.recent.sort((a,b) => {
return b-a;
})
this.setState({
recent: sortRecent,
sortBy: "recent",
order: "acending"
});
} else {
sortRecent = this.state.recent.sort((a,b) => {
return a-b;
});
this.setState({
recent: sortRecent,
sortBy: "recent",
order: "descending"
});
}
}
and there is the link to the pen
any help would be greatly appreciated. Thank you.
How about changing:
sortRecent(event){
var sortRecent;
if(this.state.order === "decending"){
sortRecent = this.state.recent.sort((a,b) => {
return b-a;
})
to
sortRecent(event){
var sortRecent;
if(this.state.order === "decending"){
sortAll = this.state.allTime.sort((a,b) => {
return b.alltime - a.alltime; // specifies the alltime property to sort on
})
1 Like
You are awesome! Thank you. I was using firefox and the sorting worked properly so I never thought to check the code. I wonder why firefox still sorted everything properly even though I clearly made a mistake, and did not specify which property to sort on…
Your implementation of sorting here is much cleaner, thank you. I am a js newbie and still have a lot to learn. As far as the sortBy property on the applications state. Since there are 2 different sets of data(from 2 different api calls), one for recent data, and one for all time data, this flag lets the application know which set of data to display.
No, there are both kept in the state of the application when it mounts. In the App component, in the componentWillMount() function, I grab both sets of data and set them the alltime and recent arrays in the components state. Then, in the render function of the App component, I set the data variable equal to either this.state.alltime or this.state.recent depending on what the user has clicked.
I think the confusion here might be because this application doesn’t necessarily act the way you would expect. I was confused by the requirements on this too, since you would think the application would be sorting the same data, and not switch between data sets. But looking at the example project, this is exactly what the example project does, so I just went with it.