title: Getting 'Can't call setState on a component that is not yet mounted' in a very simple react exercise
body: <p>Although there are many posts on this question, none of them really helped me. I am starting to learn React and have a very simple code that isn't working for some reason.</p>
  <p>The error happens when I am trying to call the <em>this.setState()</em> function inside of a react component that is inserted into an array. I imagined that this could be happening because the component is inside of an array, but I render it afterwards, so it doesn't make a lot of sense for me for that error to be thrown.</p>
  <p>I am just trying to change the color of a div when the mouse is over it, by changing its state, which would change the class from &quot;monsterEntry row&quot; to &quot;monsterEntry row toggleGrey&quot;. I have a simple css with</p>
  <pre><code>.toggleGrey{
  background-color:grey;
  }
  </code></pre>
  <p>Also, I have used create-react-app to start working on this. I appreciate any help I can get!
  Here is my code:</p>
  <p><strong>Bestiary.js</strong></p>
  <pre><code>import React from 'react';
  
  class Bestiary extends React.Component{
      constructor(props){
          super(props);
          this.state={
              mouseIn: false //the state I want to change.
          }
          this.monsterlist = Object.values(props)[0];
          this.bestiarycomponents = [];
          this.monsterlist.forEach((value, index)=&gt;{
             this.bestiarycomponents.push((
                  &lt;div key={index} className={this.state.mouseIn ? &quot;monsterEntry row toggleGrey&quot; : &quot;monsterEntry row&quot;} onMouseOver={this.setState({mouseIn: true})}&gt; //Here is my problem.
                      &lt;span className='monsterEntry-name col-6'&gt;{value.name}&lt;/span&gt;
                      &lt;span className='monsterEntry-cr col-2'&gt;{cr}&lt;/span&gt;
                      &lt;span className='monsterEntry-source col-4'&gt;{value.source}&lt;/span&gt;
                  &lt;/div&gt;
              ))
          });
      }
      render(){
          return(
              &lt;div className='bestiary-container'&gt;
                  &lt;div className=&quot;bestiary-label row&quot;&gt;
                          &lt;div className='col-6'&gt;Creature&lt;/div&gt;
                          &lt;div className='col-2'&gt;CR&lt;/div&gt;
                          &lt;div className='col-4'&gt;Sourcebook&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;div className=&quot;bestiary&quot;&gt;
                      {this.bestiarycomponents} //here is where I render it.
                      &lt;div&gt;&lt;h2&gt;Entries: {this.bestiarycomponents.length}&lt;/h2&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Bestiary;
  </code></pre>
  <p>I imagine the problem is in my Bestiary.js, but I'll also provide the index.js just in case.</p>
  <p><strong>index.js</strong></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Bestiary from './bestiary';
  
  let httprequest = new XMLHttpRequest();
  httprequest.responseType = 'json';
  httprequest.onreadystatechange = ()=&gt;{
    if(httprequest.readyState === httprequest.DONE){
      if(httprequest.status === 200) {
        ReactDOM.render(&lt;Bestiary bestiary={httprequest.response.monster}/&gt;, document.getElementById('root'));
      }
    }
  }
  httprequest.open(&quot;GET&quot;, 'a json api', true)
  httprequest.send();
  </code></pre>
  <p>The error gets thrown and the color does not change, also, but the rest works fine. The divs and everything else get rendered normally and I have also inspected the page and everything seems to be in order.</p>
  <p>What I have tried:</p>
  <ol>
  <li>Taking the render in the index.js out of a callback, and just putting some example object in place of the json response. Didn't work.</li>
  <li>Using this.state={mouseIn : true} directly. Didn't work also.</li>
  <li>Redoing everything, reinstalling node, none of that worked.</li>
  </ol>
  <p>I have been searching for solutions for a long time now, I really appreciate any help I can get!!</p>