title: How can I change a specific component in React on an eventHandler
body: <p>What i'm trying to do should be fairly simple but it seems I am not able to get reference to the specific component using <strong><em>this</em></strong> </p>
  
  <p><strong>So here I have my App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import CoolBox from './coolBox.js';
  import './App.css';
  
      class App extends Component {
  
        changeColor(){
          $(this).css('background','blue');
        }
  
        render() {
          return (
            &lt;div className="App"&gt;
              &lt;CoolBox changeColor={function(){ this.changeColor() }.bind(this)} /&gt;
              &lt;CoolBox changeColor={function(){ this.changeColor() }.bind(this)} /&gt;
              &lt;CoolBox changeColor={function(){ this.changeColor() }.bind(this)} /&gt;
            &lt;/div&gt;
          );
        }
      }
  
      export default App;
  </code></pre>
  
  <p><strong>And then here is CoolBox.js which is just a simple box with a background of red:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import $ from 'jquery';
  
  class CoolBox extends Component {
  
    render() {
      return (
        &lt;div onClick={this.props.changeColor} className="box"&gt;&lt;/div&gt;
      );
    }
  }
  
  export default CoolBox;
  </code></pre>
  
  <p><strong>Which simply looks like this:</strong>
  <a href="https://i.stack.imgur.com/wu9pt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wu9pt.png" alt="enter image description here"></a></p>
  
  <p>Now what I am trying to achieve is when you click on any of the 3 boxes the background color will change just on that specific box that was clicked.</p>
  
  <p>It seems I cannot use any jquery methods if <strong>$(this)</strong> cannot be referenced. So how can I achieve this simple function within React?</p>