React stripping out onclick - reactjs

Question

I have the following React component:
class PlayerRow extends Component {
activateKey(){
$(this).addClass('active')
}
render() {
return (
<div className="row-par">
<div className="details-cont">
</div>
<div className="key-cont">
<div onClick={this.activateKey} className="key"></div>
<div onClick={this.activateKey} className="key"></div>
<div onClick={this.activateKey} className="key"></div>
</div>
</div>
)
}
}
I am trying to perform the function activateKey on click of on of the nested divs but whenever I render out the app my onclick attribute is stripped out of all the divs. Why would this be?

Answer 1

React binds event listeners itself, so onClick does not directly result in onclick attribute in DOM. However, your code actually works (see snippet).
class PlayerRow extends React.Component {
activateKey() {
console.log('ddd')
}
render() {
return (
<div className="row-par">
<div className="details-cont">
</div>
<div className="key-cont">
<div onClick={this.activateKey} className="key">asd</div>
<div onClick={this.activateKey} className="key">qwe</div>
<div onClick={this.activateKey} className="key">zxc</div>
</div>
</div>
)
}
}
ReactDOM.render(
<PlayerRow/>,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
I suggest 2 things though, use .bind(this) for action handler or even better, use arrow function as it inherits scope by default.
From react docs:
handleClick = () => {
console.log('this is:', this);
}
see: https://facebook.github.io/react/docs/handling-events.html
Second thing - don't use jQuery. You're using React to manage DOM, and jQuery produces side-effects by default, so, it will interfere with how react works. React renders your view according to component's state or props automatically, with it's optimizations which are awesome, and jQuery doesn't edit neither props nor state, so you don't take advantage of any react's cool stuff.
For what you want to achieve, you could give your action handler a parameter which tells you which block has been clicked onClick={() => activateKey(1)}. In the handler save the active id on local state, and give your blocks the class conditionally depending on if their id matches the key id. That's my idea.

Answer 2

Using ES6 arrow function or .bind() in the render method adds unnecessary overhead to your components. You really should .bind(this) to your methods in the constructor like such:
import React, { Component } from "react";
export default class Demo extends Component {
constructor(props) {
super(props);
this.activateKey = this.activateKey.bind(this);
}
activateKey() {
console.log("ddd");
}
render() {
return (
<div className="row-par">
<div className="details-cont"></div>
<div className="key-cont">
<div onClick={this.activateKey} className="key">asd</div>
<div onClick={this.activateKey} className="key">qwe</div>
<div onClick={this.activateKey} className="key">zxc</div>
</div>
</div>
);
}
}
If you do this, the bind operation is only performed once per method during the class initialization phase. If you use ES6 arrow functions or .bind(this, etc..) inside of your render method, the binding will be executed from each element that has an onClick event, on every re-render.
The only time you should use .bind(this, etc..) or an ES6 arrow function inside of the render method is if you need to pass something other than a click event to a function.