Toggle between two states in react
It's strange that you would call this.componentDidMount. I have not seen this before. Either way, what if you created an indicator in your state that declared what should be shown? For example:

this.state = {
  dataRecent : [],
  dataAlltime : [],
  display: "recent"
}


Then inside of your render function you can choose what gets displayed.

this.state.display === 'recent' 
  ? this.state.dataRecent.map...
  : this.state.dataAlltime.map...


I would create two functions that handle getting both sets of data.

getAlltimeData() =&gt; {
   fetch(API+"alltime")
    .then(response =&gt; response.json())
    .then(data =&gt; this.setState({ dataRecent:data }))
}

getRecentData() =&gt; {
   fetch(API+"recent")
    .then(response =&gt; response.json())
    .then(data =&gt; this.setState({ dataRecent:data }))
}


You can then call both of them when the component mounts.

componentDidMount() {
  this.getAlltimeData();
  this.getRecentData();
}


At this point you have the data you need. What you don't have is a click handler to switch between recent and all time.

handleRecentClick() {
  this.setState({ display: 'recent' });
}

handleAlltimeClick() {
  this.setState({ display: 'allTime' });
}


Pass those to the buttons that change state respectively.

 &lt;button onClick={this.handleRecentClick}&gt;All Time Sort&lt;/button&gt;
 &lt;button onClick={this.handleAlltimeClick}&gt;Recent Sort&lt;/button&gt;


Make sure to bind your functions in the constructor like you did with the others.