Your goal may seem straightforward, but getting a reference to a specific component using this is proving to be tricky.
Here we have our App.js file:
import React, { Component } from 'react';
import CoolBox from './coolBox.js';
import './App.css';
class App extends Component {
changeColor(){
$(this).css('background','blue');
}
render() {
return (
<div className="App">
<CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
<CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
<CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
</div>
);
}
}
export default App;
Next, let's take a look at CoolBox.js which represents a simple box with a red background:
import React, { Component } from 'react';
import $ from 'jquery';
class CoolBox extends Component {
render() {
return (
<div onClick={this.props.changeColor} className="box"></div>
);
}
}
export default CoolBox;
This is what the result should resemble: https://i.sstatic.net/wu9pt.png
The objective here is that when clicking on any of the three boxes, only the background color of the selected box changes. Unfortunately, it seems that referencing $(this) is not working as intended within React. So, the question remains: How can we accomplish this basic functionality in React?