If you think you need JQuery in your React app you’re doing it wrong

<div class="container">
<button id="someButton">Click Me!</button>
<div id="someElement">I'm an element</div>
</div>
$(document).ready(function(){
$('#someButton').on('click',function(){
if($('#someElement').hasClass('clicked')){
$('#someElement').removeClass('clicked');
}else{
$('#someElement').addClass('clicked');
}
});
});
var ExampleComponent = React.createClass({
getInitialState : function(){
return ({isClicked : false})
},
handleClick : function(){
this.setState({isClicked : !this.state.isClicked});
},
render: function() {
var someElementClass = this.state.isClicked ? 'clicked' : '';
return(<div className="container">
<div id="someElement" className={someElementClass}>
I'm an element
</div>
<button id="someButton" onClick={this.handleClick}>
Click me!
</button>
</div> );
}
});
ReactDOM.render(<ExampleComponent />,document.getElementById('content'));

--

--

Editor of http://newsletter.fullstackreact.com, fan of all things React

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store