title: How to rerender a React component which gets API data?
body: <p>I am very new to React and JavaScript and I am trying to make a simple React web page which fetches from data from an API and displays it. However, I would like the React component which renders the data to automatically refresh itself every 60 seconds or so, and for there to be a button which the user can manually refresh the page as well.</p>
  <p>I have attempted to make an auto-refresh system using <code>setInterval</code> inside of <code>componentDidMount</code> but that approach didn't seem to work. This is the code which I have for the component that renders the data:</p>
  <pre><code>class Player extends Component {
    state = {
      loading: true,
      karma: 0,
      username: &quot;&quot;,
    };
  
    async componentDidMount() {
      const url = `https://api.hypixel.net/player?key=INSERTAPIKEYHERE&amp;name=${this.props.username}`;
      const response = await fetch(url);
      const data = await response.json();
  
      if (!data.player) {
        this.setState({
          loading: false,
          karma: &quot;There is no data for that player!&quot;,
          username: &quot;There is no data for that player!&quot;,
        });
      } else {
        this.setState({
          loading: false,
          karma: &quot;, Karma: &quot; + data.player.karma,
          username: &quot;Username: &quot; + data.player.displayname,
        });
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.state.loading ? (
            &lt;p&gt;Loading...&lt;/p&gt;
          ) : (
            &lt;p&gt;
              {this.state.username}
              {this.state.karma}
            &lt;/p&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  <p>Here, the data is fetched in <code>componentDidMount</code>, it is assigned to the <code>karma</code> and <code>username</code> keys in <code>state</code> and then it is rendered.</p>
  <p>And this is the code for my <code>App.js</code>:</p>
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;div className=&quot;playerPage&quot;&gt;
            &lt;Player username=&quot;SirArchibald97&quot; /&gt;
          &lt;/div&gt;
          &lt;button&gt;Refresh&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>Here, I create a new <code>Player</code> component as well as a button to refresh the data.</p>