title: React component re-renders endlessly with onClick
body: <p>I want the onClick event of the button in result.js to render my Spinner component, and have so far (kind of) gotten it to do so. At the moment, Spinner mostly has some console.log() statements, and it keeps logging "Rendered spinner." endlessly after clicking the button, about once every second.
  For the record, the returned paragraph isn't being displayed, but I haven't gotten around to debugging that yet. Also, I have excluded some code in Result.js that I think is irrelevant.</p>
  
  <p>For now, I just want Spinner to only render once after pressing the button. Any tips?</p>
  
  <p>result.js:</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import Spinner from "./spinner";
  
  class UnboxResult extends Component {
    constructor(props) {
      super(props);
      this.state = {
        showSpinner: false
      };
      this.handleUnboxClicked = this.handleUnboxClicked.bind(this);
    }
  
    handleUnboxClicked(event) {
      event.preventDefault();
      console.log("Inside handleUnboxClicked");
      this.setState({
        showSpinner: true
      });
    }
  
    render() {
  
      return (
        &lt;section className="opening"&gt;
          &lt;div className="container"&gt;
            &lt;div className="row"&gt;
              &lt;button onClick={this.handleUnboxClicked}&gt;UNBOX&lt;/button&gt;
            &lt;/div&gt;
            &lt;div className="row"&gt;
              {this.state.showSpinner ?
                &lt;Spinner items={this.props.unbox.items}/&gt; :
                null}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      );
    }
  }
  
  export default connect(state =&gt; ({
    unbox: state.unbox
  }))(UnboxResult);
  </code></pre>
  
  <p>spinner.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Spinner extends Component {
    constructor(props) {
      console.log("Before super");
      super(props);
      console.log("Ran constructor.");
    }
  
    render(){
      console.log("Rendered spinner.");
      return(
      &lt;p&gt;Spinning..&lt;/p&gt;
      );
    }
  }
  export default Spinner;
  </code></pre>