title: How do I stop the call stack from over loading?
body: <p>My problem is simple yet infuriating. All I want to do is have an <code>onClick</code> event that when triggered changes the state on the component. The only problem is if I don't stop the <code>addActiveClass</code> function from running initially with the loaded state prop than I get a call stack overload because this component is being rendered by a <code>.map</code> function. </p>
  
  <p>The second I remove the <code>if (this.state.loaded) { //logic  }</code> over my state change logic I get  </p>
  
  <p><a href="https://i.stack.imgur.com/qO22w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qO22w.png" alt="enter image description here"></a></p>
  
  <p>Please help me understand why I can't do this simple thing in React.</p>
  
  <pre><code>class IndividualQA extends Component {
    constructor(props) {
      super(props);
      // this.addActiveClass = this.addActiveClass.bind(this);
      this.state = {
        active: false,
        loaded: false
      };
      // this.state({ arrowState: this.props.arrowClass });
    }
    addActiveClass = (load) =&gt; {
      if (this.state.loaded) {
        const currentState = this.state.active;
        console.log(this.state);
        this.setState({ active: !currentState });
      }
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-xl-11 col-lg-11 col-md-11 col-sm-10 col-10"&gt;
              {this.props.data.Q}
            &lt;/div&gt;
            &lt;div className="col-xl-1 col-lg-1 col-md-1 col-sm-2 col-2 Question"&gt;
              &lt;a
                data-toggle="collapse"
                href={`#QA${this.props.id}`}
                id="arrowSVG"
                onClick={this.addActiveClass()}
              &gt;
                &lt;img
                  style={{ height: "30px" }}
                  className={this.state.active ? "transform" : ""}
                  src={downArrow}
                /&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="row collapse" id={`QA${this.props.id}`}&gt;
            &lt;div className="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-11 As-a-long-time-Kiva"&gt;
              {this.props.data.A}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default IndividualQA;
  </code></pre>