Toggle between two states in react I have two fetch calls which updates the state. And I have two buttons. One makes a fetch call, another calls componentDidMount().

The first fetch call is in componentDidMount().

The second is On "All Time Sort" button click with handleSortRecent().

On "Recent Sort" button click, I want to show the previous informatin fetched in componentDidMount. To achieve this
I am calling the componentDidMount() method itself from handleSortRecent() method.

Is there a better way to do this without using Redux?



const API = "https://fcctop100.herokuapp.com/api/fccusers/top/";

class App extends Component {
  constructor(props) {
    super(props);

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

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
    this.handleSortRecent = this.handleSortRecent.bind(this);
  }

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

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

  handleSortRecent() {
    this.componentDidMount();
  }

  render() {
    const arrRecentList = this.state.dataRecent;

    return (
      &lt;div className="App"&gt;
      &lt;button onClick={this.handleClick}&gt;All Time Sort&lt;/button&gt;
      &lt;button onClick={this.handleSortRecent}&gt;Recent Sort&lt;/button&gt;
      {
        arrRecentList.map(data =&gt;
          &lt;div key={data.username}&gt;
            &lt;img src={data.img} width="50px" alt="" /&gt;
            &lt;a href={"https://www.freecodecamp.org/"+data.username} target="_blank"&gt;{data.username}&lt;/a&gt;
            &lt;span&gt; - &lt;/span&gt;
            &lt;span&gt;{data.recent}&lt;/span&gt;
            &lt;span&gt; - &lt;/span&gt;
            &lt;span&gt;{data.alltime}&lt;/span&gt;
          &lt;/div&gt;
        )
      }
      &lt;/div&gt;
    );
  }
}
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.